:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;height:100vh;width:100vw;overflow:hidden}body{display:flex;place-items:center}button{box-shadow:none}.board-container{position:fixed;top:32%;left:50%;transform:translate(-50%,-30%);display:flex;flex-direction:column;align-items:center;z-index:500}.board-placeholder{text-align:center;padding:60px;color:var(--color-shadow-accent);font-style:italic}.board{opacity:1;display:grid;background:var(--color-background);border-radius:30px;box-shadow:-1px -1px .5px var(--color-shadow),inset -1px -1px 1px var(--color-shadow-accent);position:relative;transition:opacity .3s ease}.board-complete,.cell-complete{opacity:0}.cell{opacity:1;width:100%;height:100%;background:var(--color-background);box-shadow:inset -1px -1px 1px var(--color-shadow),inset 1px 1px 1px var(--color-shadow-accent),0 0 0 var(--color-background);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:30px;cursor:pointer;border-radius:50%;-webkit-user-select:none;user-select:none;position:relative;z-index:1;transition:box-shadow .3s ease,transform .3s ease,background-color .3s ease,text-shadow .3s ease,opacity .3s ease}.cell:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 var(--color-shadow),inset -1px -1px .5px var(--color-shadow-accent),-1px -1px .5px var(--color-shadow)}.cell.game-node{background:var(--color-game-pieces);font-weight:700;position:relative;z-index:7;box-shadow:inset -1px -1px 1px var(--color-shadow),inset 1px 1px 1px var(--color-game-pieces);font-size:42px;font-family:Fredoka One,cursive;text-shadow:-1px -1px 1px var(--color-shadow),1px 1px 1px var(--color-game-pieces-shadow);color:var(--color-game-pieces)}.game-node-number{position:relative;z-index:10;pointer-events:none}.cell.game-node:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 var(--color-shadow),inset -1px -1px .5px var(--color-game-pieces),-1px -1px .5px var(--color-shadow);text-shadow:0px 0px 0px var(--color-shadow),0px 0px 0px var(--color-game-pieces)}.cell.traversed{transform:translateY(-1px);box-shadow:inset 0 0 0 var(--color-shadow),inset -1px -1px .5px var(--color-shadow-accent),-1px -1px .5px var(--color-shadow)}.cell.solution-complete{background:var(--color-complete);box-shadow:none;font-family:Fredoka One,cursive;text-shadow:0px 0px 0px var(--color-complete),0px 0px 0px var(--color-complete);color:var(--color-complete);transform:translateY(-1px);transition:none!important}.wall{position:absolute;border:inset 1px var(--color-shadow);z-index:4}.path-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6}.wall.vertical{position:absolute;background-color:var(--color-shadow-accent);z-index:4}.wall.horizontal{background-color:var(--color-shadow-accent)}.sunken{box-shadow:inset -.25px -.25px 0 var(--color-shadow-accent),inset .25px .25px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}.raised{box-shadow:inset 0 0 0 var(--color-shadow),inset -1px -1px 0 var(--color-shadow-accent),-1.5px -1.5px 0 var(--color-shadow)}.pressed{box-shadow:inset -1px -1px 0 var(--color-shadow),inset 1px 1px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}.sunken-text{text-shadow:-1px -1px 1px var(--color-shadow),1px 1px 1px var(--color-shadow-accent)}.raised-text{text-shadow:1px 1px 1px var(--color-shadow),-1px -1px 1px var(--color-shadow-accent);transform:translate(-1px,1px)}.pressed-text{text-shadow:0px 0px 0px var(--color-shadow),0px 0px 0px var(--color-shadow-accent)}.drop-shadow-light{filter:drop-shadow(1px 1px 0px var(--color-shadow)) drop-shadow(.5px .5px 1px var(--color-shadow-accent))}.drop-shadow-pressed{filter:drop-shadow(-1px -1px 0px var(--color-shadow)) drop-shadow(1px 1px .5px var(--color-shadow-accent));transform:translate(2px,2px)}.drop-shadow-subtle{filter:drop-shadow(1px 1px 0px var(--color-background)) drop-shadow(-.5px -.5px .5px var(--color-shadow-accent))}.animate-fade-in{animation:fadeIn .3s ease}.animate-fade-out{animation:fadeOut .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.game-complete,.game-transitioning{opacity:0;transition:opacity .3s ease}.button--disabled{opacity:.1;cursor:auto;pointer-events:none}.button--active:hover:not(.button--disabled){box-shadow:inset -.25px -.25px 0 var(--color-shadow-accent),inset .25px .25px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}.button--active:active:not(.button--disabled){box-shadow:inset -1px -1px 0 var(--color-shadow),inset 1px 1px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}:root{--color-shadow: #ffffff;--color-background: #202020;--color-shadow-accent: #333333;--color-game-pieces: #304974;--color-complete: #22c55e;--color-game-pieces-shadow: #1b2942}.app{height:100vh;width:100vw;background:var(--color-background);overflow:hidden;position:relative}.container{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.header{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000}.header h1{font-size:30px;font-family:Fredoka One,cursive;text-shadow:-1.5px -1.5px 1px var(--color-shadow),1px 1px 1px var(--color-shadow-accent);color:var(--color-background);letter-spacing:10px;margin:0}.loading{display:flex;flex-direction:column;align-items:center;gap:15px;padding:40px;color:var(--color-shadow-accent)}.spinner{width:40px;height:40px;border:4px solid var(--color-background);border-top:4px solid var(--color-game-pieces);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{background-color:var(--color-background);color:var(--color-complete);padding:15px;border-radius:8px;border:1px solid var(--color-shadow-accent);margin:20px 0;text-align:center}.bottom-controls{position:fixed;bottom:30px;left:50%;transform:translate(-50%);z-index:1000;display:flex;gap:20px;align-items:center}.arrow-btn,.rewind-btn{width:60px;height:60px;background:var(--color-background);border:none;border-radius:50%;box-shadow:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s ease;font-family:Fredoka One,cursive;text-shadow:-1.5px -1.5px 1px var(--color-shadow),1px 1px 1px var(--color-shadow-accent);color:var(--color-background);margin:0}.arrow-btn:hover,.rewind-btn:hover:not(:disabled){box-shadow:inset -2px -2px 2px var(--color-shadow);text-shadow:-2.5px -2.5px 2px var(--color-shadow)}.rewind-btn{width:60px;height:60px;font-weight:700;font-size:30px;box-shadow:-.5px -.5px .5px var(--color-shadow),1px 1px 1px var(--color-shadow-accent);display:flex;align-items:center;justify-content:center}.rewind-btn:disabled{opacity:.3;cursor:not-allowed}.button{width:60px;height:60px;font-weight:800;font-size:50px;padding:10px;box-shadow:inset 0 0 0 var(--color-shadow),inset -1px -1px .5px var(--color-shadow-accent),-1px -1px 0 var(--color-shadow);background:var(--color-background);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-background);transition:box-shadow .3s ease,opacity .3s ease;cursor:pointer}.button:hover:not(:disabled){box-shadow:inset -.25px -.25px 0 var(--color-shadow-accent),inset .25px .25px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}.button:active:not(:disabled){box-shadow:inset -1px -1px 0 var(--color-shadow),inset 1px 1px .5px var(--color-shadow-accent),0 0 0 var(--color-shadow)}.button:hover:not(:disabled) .icon{filter:drop-shadow(1px 1px 0px var(--color-shadow-accent)) drop-shadow(.5px .5px 1px var(--color-shadow-accent))}.button:active:not(:disabled) .icon{filter:drop-shadow(-1px -1px 0px var(--color-shadow)) drop-shadow(1px 1px .5px var(--color-shadow-accent));transform:translate(2px,2px)}.button:disabled{opacity:.1;cursor:auto}.icon{width:auto;height:auto;filter:drop-shadow(1px 1px .5px var(--color-shadow)) drop-shadow(-.5px -.5px .5px var(--color-shadow-accent));transition:filter .3s ease,transform .3s ease}.nav-controls{position:fixed;bottom:5%;left:50%;transform:translate(-50%,-10%);display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}