:root{--bg:#fff;--fg:#000;--line:#999;--muted:#999;--given-bg:#ddd;--same-bg:#666;--same-fg:#fff;--selected-bg:#000;--selected-fg:#fff;--wall:#555}html.dark{--bg:#000;--fg:#fff;--line:#777;--muted:#777;--given-bg:#333;--same-bg:#999;--same-fg:#000;--selected-bg:#fff;--selected-fg:#000;--wall:#8a8a8a}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0;font-family:sans-serif;overflow:hidden}#root{height:100%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}button,.button{font:inherit;color:var(--fg);background:var(--bg);border:2px solid var(--fg);text-align:center;border-radius:0;padding:8px 12px;font-size:20px;text-decoration:none;display:inline-block}button.on{background:var(--fg);color:var(--bg)}button:disabled{color:var(--muted);border-color:var(--muted)}.screen{flex-direction:column;align-items:center;height:100%;padding:6px;display:flex}.message{text-align:center;min-height:26px;margin:4px 0;font-size:18px}.home h1{margin:12px 0 8px;font-size:34px}.home h2{margin:18px 0 6px;font-size:20px}.home .wide{width:100%;max-width:520px;margin-bottom:6px}.home .levels{flex-wrap:wrap;justify-content:center;max-width:560px;display:flex}.home .levels .button{width:30%;margin:4px}.level-choice{flex-wrap:wrap;justify-content:center;max-width:560px;margin-bottom:8px;display:flex}.level-choice button{margin:3px;padding:6px 10px;font-size:18px}.by-number{justify-content:center;width:100%;max-width:520px;display:flex}.by-number input{font:inherit;border:2px solid var(--fg);background:var(--bg);color:var(--fg);border-radius:0;width:100px;margin-right:6px;padding:6px;font-size:20px}.game-header{justify-content:space-between;width:100%;max-width:660px;padding:2px 4px 6px;font-size:18px;display:flex}.game-header .title{font-weight:700}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;display:flex}.board{grid-template-columns:repeat(9, var(--cell));grid-auto-rows:var(--cell);border:3px solid var(--fg);display:grid}.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:calc(var(--cell) * .6);justify-content:center;align-items:center;line-height:1;display:flex}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+73){border-bottom:0}.cell.box-right{border-right:2px solid var(--fg)}.cell.box-bottom{border-bottom:2px solid var(--fg)}.cell.given{background:var(--given-bg);font-weight:700}.cell.same{background:var(--same-bg);color:var(--same-fg)}.cell.selected{background:var(--selected-bg);color:var(--selected-fg)}.cell.wrong{outline:3px dashed var(--fg);outline-offset:-5px}.cell.selected.wrong{outline-color:var(--selected-fg)}.notes{width:100%;height:100%;font-size:calc(var(--cell) * .27);grid-template-columns:repeat(3,1fr);display:grid}.notes span{justify-content:center;align-items:center;display:flex}.cell.selected .notes{color:var(--selected-fg)}.cell.same .notes{color:var(--same-fg)}.paused{border:3px solid var(--fg);flex-direction:column;justify-content:center;align-items:center;font-size:26px;display:flex}.pad{justify-content:center;display:flex}.pad button{width:var(--cell);height:54px;margin:0 1px;padding:0;font-size:28px}.pad button.marked{background:var(--fg);color:var(--bg)}.controls{flex-wrap:wrap;justify-content:center;margin-top:8px;display:flex}.controls button,.controls .button{margin:0 3px;padding:8px 10px;font-size:18px}.controls.end button,.controls.end .button{margin:4px}.settings h1{margin:12px 0 16px;font-size:30px}.setting{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;width:100%;max-width:560px;margin-bottom:16px;padding:10px 0;display:flex}.setting p{margin:4px 16px 0 0;font-size:16px}.setting button{min-width:72px}.home .settings-link{margin-top:24px}.home .game-link{justify-content:space-between;align-items:center;padding:14px 16px;font-size:22px;display:flex}.home .game-link span{font-size:17px}.sk-board{display:grid}.sk-cell{width:var(--sk-cell);height:var(--sk-cell);justify-content:center;align-items:center;display:flex}.sk-cell.wall{background:var(--wall)}.sk-cell.floor{background:var(--bg)}.sk-cell.outside{background:0 0}.sk-cell .dot{background:var(--fg);border-radius:50%;width:26%;height:26%}.sk-cell .box{border:4px solid var(--fg);background:var(--bg);width:76%;height:76%}.sk-cell .box.on-goal{background:var(--fg)}.sk-cell .player{background:var(--fg);border:3px solid var(--bg);width:66%;height:66%;box-shadow:0 0 0 2px var(--fg);border-radius:50%}.controller{width:100%;max-width:600px;margin-top:auto;padding-bottom:4px}.controller-main{justify-content:space-between;align-items:center;padding:0 18px;display:flex}.dpad{grid-template-rows:repeat(3,54px);grid-template-columns:repeat(3,58px);display:grid}.dpad button{border-width:3px;justify-content:center;align-items:center;padding:0;display:flex}.dpad .dpad-up{border-bottom:0;border-radius:10px 10px 0 0;grid-area:1/2}.dpad .dpad-left{border-right:0;border-radius:10px 0 0 10px;grid-area:2/1}.dpad .dpad-right{border-left:0;border-radius:0 10px 10px 0;grid-area:2/3}.dpad .dpad-down{border-top:0;border-radius:0 0 10px 10px;grid-area:3/2}.dpad-hub{grid-area:2/2;justify-content:center;align-items:center;display:flex}.dpad-hub:after{content:"";border:3px solid var(--fg);border-radius:50%;width:22px;height:22px}.dpad .arrow{border:11px solid #0000;width:0;height:0}.dpad-up .arrow{border-bottom:15px solid var(--fg);margin-top:-12px}.dpad-down .arrow{border-top:15px solid var(--fg);margin-bottom:-12px}.dpad-left .arrow{border-right:15px solid var(--fg);margin-left:-12px}.dpad-right .arrow{border-left:15px solid var(--fg);margin-right:-12px}.dpad button:disabled .arrow{opacity:.4}.controller-actions{align-items:center;display:flex}.controller-actions .round{border-width:3px;border-radius:50%;width:78px;height:78px;margin-left:14px;padding:0;font-size:16px}.controller-actions .round:nth-child(2){margin-top:-36px}.controller-extra{justify-content:center;margin-top:8px;display:flex}.controller-extra button,.controller-extra .button{border-width:1px;margin:0 6px;padding:4px 14px;font-size:15px}