:root{--bg: #050505;--fg: #eee;--accent: #fff;--dim: #444;--tile-bg: #111;--tile-fg: #ccc;--font: "Courier New", Courier, monospace}body,html{margin:0;padding:0;width:100%;height:100%;background:#000;color:var(--fg);font-family:var(--font);overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;height:100%}.info-bar{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid #222;font-size:.7rem;background:#000;z-index:10;letter-spacing:1px}.brand{font-weight:700;color:#fff}.stats{display:flex;gap:30px;color:#666}.stats span span{color:#fff;font-weight:700}.exit-link{color:#666;text-decoration:none;transition:all .2s}.exit-link:hover{color:#fff}.main-view{flex:1;display:flex;position:relative}.puzzle-container{width:350px;border-right:1px solid #222;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#050505;position:relative;z-index:5}#puzzle-board{width:240px;background:#000;border:1px solid #333;box-shadow:0 0 50px #00000080;position:relative}.tool-btn{width:40px;height:40px;padding:0;display:flex;justify-content:center;align-items:center;font-size:.6rem}.tool-btn.active{background:#fff;color:#000}.tile{background:#111;color:#666;display:flex;justify-content:center;align-items:center;font-size:1.2rem;font-weight:400;cursor:pointer;transition:background .2s,color .2s,transform .2s;border:1px solid #222;box-sizing:border-box}.tile:hover{background:#222;color:#fff;border-color:#555;z-index:10}.tile.type-hero{background:#ccc;color:#000;border:1px solid #fff;font-weight:700;z-index:2}.tile.type-hero:hover{background:#fff}.tile.type-v-bar,.tile.type-h-bar{background:#1a1a1a;border:1px solid #333;color:#888}.tile.type-pawn{background:#111;border:1px solid #222}.puzzle-controls{margin-top:40px;display:flex;flex-direction:column;gap:15px;width:240px}select{background:#000;color:#888;border:1px solid #333;padding:10px;font-family:inherit;font-size:.7rem;outline:none;cursor:pointer;width:100%;text-transform:uppercase;letter-spacing:1px}select:hover{border-color:#666;color:#fff}button{background:transparent;border:1px solid #333;color:#888;padding:10px 20px;font-family:inherit;cursor:pointer;font-size:.7rem;letter-spacing:1px;transition:all .3s;text-transform:uppercase}button:hover{border-color:#fff;color:#fff;background:#ffffff0d;box-shadow:0 0 15px #ffffff1a}button.active{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 20px #ffffff4d}.vis-container{flex:1;position:relative;background:#000;overflow:hidden}canvas{display:block;width:100%;height:100%}.vis-controls{position:absolute;bottom:30px;right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:20px;pointer-events:none}.vis-controls>*{pointer-events:auto}.mode-switch{display:flex;gap:0;border:1px solid #333}.mode-switch button{border:none;border-right:1px solid #333;padding:8px 16px}.mode-switch button:last-child{border-right:none}.mode-switch button.active{background:#fff;color:#000}.depth-control{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.depth-control label{font-size:.6rem;color:#666;letter-spacing:1px;font-weight:700}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:200px;height:1px;background:#333;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#000;border:1px solid #fff;cursor:pointer;transition:transform .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.5);background:#fff}@media (max-width: 800px){.main-view{flex-direction:column}.puzzle-container{width:100%;height:50%;border-right:none;border-bottom:1px solid var(--dim)}.vis-container{height:50%}#puzzle-board{width:200px;height:200px}}