:root{--max-width: 540px;--bg-primary: #fafafa;--bg-secondary: #eeeeee;--text-primary: #333333;--text-secondary: #666666;--border-color: #cccccc;--cell-empty: #d5d5d5;--cell-filled: #4a90d9;--cell-wall: #555555;--cell-ray-active: #ffcc00;--teleporter-color: #9b59b6;--reflector-color: #e67e22;--tray-bg: #e8e8e8;--ray-item-bg: #4a90d9;--ray-item-text: #ffffff;--ray-item-used: #aaaaaa;--btn-primary: #4a90d9;--btn-text: #ffffff;--enabled-color: #4caf50;--overlay-bg: rgba(0, 0, 0, .4);--dialog-bg: #ffffff;--dialog-text: #333333}body.dark{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--text-primary: #e0e0e0;--text-secondary: #aaaaaa;--border-color: #3a3a5c;--cell-empty: #2c3e50;--cell-filled: #3498db;--cell-wall: #1a1a2e;--tray-bg: #16213e;--ray-item-bg: #3498db;--btn-primary: #3498db;--enabled-color: #2ecc71;--overlay-bg: rgba(0, 0, 0, .6);--dialog-bg: #16213e;--dialog-text: #e0e0e0}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);display:flex;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{width:100%;max-width:var(--max-width);height:100%;display:flex;flex-direction:column;position:relative}.view{display:none;flex-direction:column;flex:1;width:100%;min-height:0}.view.active{display:flex}.overlay-back{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);z-index:100}.level-select{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1;padding:2rem 1rem}.level-select-title{font-size:2.5rem;font-weight:800;margin-bottom:.25rem;color:var(--text-primary)}.level-select-subtitle{font-size:.9rem;color:var(--text-secondary);margin-bottom:2rem}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;max-width:320px}.level-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px solid var(--border-color);border-radius:12px;background-color:var(--bg-secondary);cursor:pointer;transition:all .15s ease;font-family:inherit;color:var(--text-primary);position:relative}.level-btn:hover:not(.locked){transform:scale(1.05);border-color:var(--btn-primary)}.level-btn.completed{border-color:var(--enabled-color);background-color:var(--enabled-color);color:#fff}.level-btn.locked{opacity:.4;cursor:not-allowed}.level-number{font-size:1.2rem;font-weight:700}.level-info{font-size:.55rem;opacity:.8;margin-top:2px}.level-lock{font-size:.9rem}.level-editor-btn{margin-top:2rem;padding:10px 24px;border:1px solid var(--border-color);border-radius:10px;background-color:var(--bg-secondary);color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease}.level-editor-btn:hover{color:var(--text-primary);border-color:var(--btn-primary)}.board{display:grid;gap:2px;padding:8px;flex:1;align-content:center;max-height:100%}.board-cell{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;transition:background-color .1s ease,transform .15s ease,box-shadow .15s ease;position:relative}.board-cell.wall{background-color:var(--cell-wall)}.board-cell.empty{background-color:var(--cell-empty)}.board-cell.filled{background-color:var(--cell-filled)}.board-cell.ray-active{background-color:var(--cell-ray-active)}.board-cell.teleporter{border:2px solid var(--teleporter-color)}.board-cell.reflector{border:2px solid var(--reflector-color)}.cell-icon{font-size:.6rem;font-weight:800;opacity:.8}.board-cell.drop-highlight{transform:scale(1.15);box-shadow:0 0 8px #4a90d980;background-color:var(--btn-primary);z-index:2}.ray-tray{background-color:var(--tray-bg);border-top:1px solid var(--border-color);padding:12px 8px;flex-shrink:0}.tray-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px}.tray-items{display:flex;gap:8px;flex-wrap:wrap}.ray-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;background-color:var(--ray-item-bg);color:var(--ray-item-text);border-radius:10px;cursor:grab;touch-action:none;transition:transform .1s ease,box-shadow .1s ease;position:relative;z-index:1}.ray-item:active{cursor:grabbing}.ray-item.dragging{opacity:.8;transform:scale(1.1);box-shadow:0 4px 12px #0000004d;z-index:10000}.ray-arrow{font-size:1.4rem;line-height:1}.ray-label{font-size:.55rem;font-weight:600;margin-top:2px;opacity:.8}.game-header{display:flex;align-items:center;gap:8px;padding:12px 8px;border-bottom:1px solid var(--border-color);flex-shrink:0}.header-btn{width:36px;height:36px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .1s ease;font-family:inherit}.header-btn:hover{background-color:var(--border-color)}.header-title{font-size:1rem;font-weight:700;flex:1}.header-moves{font-size:.8rem;color:var(--text-secondary)}.header-btn-group{display:flex;gap:4px}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background-color:var(--dialog-bg);color:var(--dialog-text);border:1px solid var(--border-color);border-radius:16px;padding:2rem 2.5rem;text-align:center;min-width:240px;box-shadow:0 8px 32px #0003}.dialog::backdrop{background:transparent}.dialog-content{font-size:1.1rem;font-weight:600;line-height:1.5}.dialog-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-secondary);padding:4px;line-height:1}.dialog-close:hover{color:var(--text-primary)}.editor-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-primary);z-index:200;display:flex;justify-content:center;overflow-y:auto}.editor-panel{width:100%;max-width:500px;padding:16px;display:flex;flex-direction:column;gap:16px}.editor-title-row{display:flex;align-items:center;justify-content:space-between}.editor-title{font-size:1.3rem;font-weight:800}.editor-close-btn{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-secondary);padding:4px 8px}.editor-close-btn:hover{color:var(--text-primary)}.editor-section{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.editor-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);min-width:80px}.editor-size-controls{display:flex;gap:4px}.editor-size-btn{width:32px;height:32px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}.editor-size-btn:active{transform:scale(.9)}.editor-mode-toggle{display:flex;gap:4px}.editor-mode-btn{padding:6px 12px;border:2px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .1s ease;font-family:inherit}.editor-mode-btn.selected{border-color:var(--btn-primary);background-color:var(--btn-primary);color:var(--btn-text)}.editor-grid-container{display:flex;justify-content:center}.editor-grid{display:grid;gap:2px;width:100%;max-width:400px}.editor-cell{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.6rem;font-weight:800;transition:background-color .1s ease}.editor-cell.wall{background-color:var(--cell-wall)}.editor-cell.empty{background-color:var(--cell-empty)}.editor-cell.teleporter{border:2px solid var(--teleporter-color);color:var(--teleporter-color)}.editor-cell:hover{opacity:.8}.editor-ray-controls{display:flex;flex-direction:column;gap:6px;flex:1}.editor-ray-row{display:flex;align-items:center;gap:8px}.editor-ray-label{font-size:.8rem;min-width:60px}.editor-ray-count{font-size:.9rem;font-weight:700;min-width:20px;text-align:center}.editor-actions{display:flex;gap:8px}.editor-action-btn{flex:1;padding:10px 16px;border:1px solid var(--border-color);border-radius:10px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background-color .1s ease}.editor-action-btn:hover{background-color:var(--border-color)}.editor-action-primary{background-color:var(--btn-primary);color:var(--btn-text);border-color:var(--btn-primary)}.editor-action-primary:hover{opacity:.9;background-color:var(--btn-primary)}.editor-json-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);z-index:400;display:flex;align-items:center;justify-content:center}.editor-json-content{background-color:var(--dialog-bg);border-radius:12px;padding:20px;width:90%;max-width:400px;display:flex;flex-direction:column;gap:12px}.editor-json-content h3{font-size:1rem;margin:0}.editor-json-textarea{width:100%;height:250px;font-family:monospace;font-size:11px;border:1px solid var(--border-color);border-radius:8px;padding:8px;resize:none;background-color:var(--bg-secondary);color:var(--text-primary)}.editor-json-actions{display:flex;gap:8px}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);z-index:150;display:flex;align-items:center;justify-content:center}.settings-panel{background-color:var(--dialog-bg);color:var(--dialog-text);border-radius:16px;padding:24px;width:90%;max-width:360px;display:flex;flex-direction:column;gap:20px;box-shadow:0 8px 32px #0003}.settings-title-row{display:flex;align-items:center;justify-content:space-between}.settings-title{font-size:1.2rem;font-weight:800;margin:0}.settings-close-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-secondary);padding:4px 8px;line-height:1}.settings-close-btn:hover{color:var(--text-primary)}.settings-section{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-label{font-size:.9rem;font-weight:600}.settings-theme-toggle{display:flex;gap:4px}.settings-theme-btn{padding:6px 14px;border:2px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:inherit}.settings-theme-btn.selected{border-color:var(--btn-primary);background-color:var(--btn-primary);color:var(--btn-text)}.settings-version{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;color:var(--text-secondary);padding-top:8px;border-top:1px solid var(--border-color)}.settings-commit{font-family:monospace;opacity:.7}