:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{flex-direction:column;display:flex}sokoban-board{--piece-size:2em;grid-template-columns:repeat(var(--grid-w,10), var(--piece-size));grid-template-rows:repeat(var(--grid-h,10), var(--piece-size));margin:1em;display:grid}sokoban-tile{grid-area:var(--y) / var(--x) / var(--y) / var(--x);z-index:10}sokoban-tile.player{z-index:20;background-color:#8c42d7;border:.4em outset #639}sokoban-tile.wall{background:#87cefa;border:.4em outset #72c3f5}sokoban-tile.box{background:#deb887;border:.4em outset #d3a05f}sokoban-tile.box-on-goal-square{background:#a2845d;border:.4em outset #81694b}sokoban-tile.goal-square{--color:var(--lightningcss-light,#d3d3d3)var(--lightningcss-dark,#696969);background:var(--color);border:.4em inset hsl(from var(--color) h s calc(l - 10))}sokoban-border-board{--piece-size:2em;grid-template-columns:repeat(var(--grid-w,10), var(--piece-size));grid-template-rows:repeat(var(--grid-h,10), var(--piece-size));border:4px solid green;gap:4px;display:grid;position:absolute;top:0;left:0}sokoban-border-board sokoban-border-tile{width:var(--piece-size);height:var(--piece-size);outline:4px solid #0000004d;display:grid}kbd{border:1px solid gray;border-bottom-width:3px;border-radius:3px;padding:0 3pt}li>ul{margin:0}.inputs{border:1px solid var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);margin:.5em;padding:.5em;position:relative}.input-label{background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1c1b22);font-size:small;position:absolute;top:-.8em;left:.6em}h2{margin:0}div.dpad{--button-size:3em;width:calc(var(--button-size) * 3 + .4em);flex-flow:wrap;gap:.2em;margin:.5em;display:inline-flex}div.dpad>.dpad{width:var(--button-size);height:var(--button-size);place-content:center;margin:0;padding:0}div.dpad>.dpad.btn{appearance:none;color:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);cursor:pointer;background-color:var(--lightningcss-light,#e9e9ed)var(--lightningcss-dark,#2b2a33);border:1px solid var(--lightningcss-light,gray)var(--lightningcss-dark,#8f8f9d);border-radius:4px;margin:0;padding:0;font-size:1rem;line-height:1}@media (pointer:coarse){.mobile{display:initial}}@media (pointer:fine){.mobile{display:none}}