#container{--board-width: 450px;--board-height: var(--board-width);margin:auto;position:relative;width:100%;max-width:var(--board-width)}#container.play #setting,#container.play button#play{display:none}#container:not(.play) #board,#container:not(.play) #end,#container:not(.play) button#pause{display:none}#container #end{border:2px solid var(--bd-color);position:absolute;bottom:0;left:0;height:var(--board-height);width:var(--board-width)}#container #end:before{background-color:var(--sub-bg-color);content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75}#container #end div{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gap-2);position:relative;height:100%;width:100%;z-index:2;font-size:1.25em}#container #end div label{color:var(--theme-color);cursor:pointer}#info{display:flex;align-items:flex-end;padding-bottom:var(--gap-2);font-size:1.15rem}#info #option{flex:1;display:flex;justify-content:flex-end;gap:var(--gap-2)}#info #option button{background:rgba(0,0,0,0);border:0;font-size:1.5rem;cursor:pointer;transition:.1s color}#info #option button:hover{color:var(--theme-color)}#setting{border:2px solid var(--bd-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gap);padding:var(--gap) 0;height:var(--board-height)}#setting label,#setting input{transition:.1s color,.1s border-color}#setting label{border:1px solid var(--bd-color);border-radius:.5em;line-height:2rem;width:6.25rem;text-align:center;cursor:pointer}#setting label:hover{border-color:var(--theme-color);color:var(--theme-color)}#setting hr{border:0 dashed var(--bd-color);border-top-width:1px;height:0;width:100%}#setting .default{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--gap)}#setting .custom{flex:1;display:flex;gap:var(--gap);justify-content:center;align-items:center;flex-wrap:wrap}#setting .custom input{background:rgba(0,0,0,0);border:0px solid var(--bd-color);border-bottom-width:1px;outline:0;width:3em;text-align:center}#setting .custom input:focus{border-color:var(--theme-color)}#board{border:1px solid var(--bd-color);display:flex;flex-direction:column;height:var(--board-height)}#board div{flex:1;display:flex}#board span{flex:1;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);border:1px solid var(--bd-color);font-size:2em}#board span[num]{--bg-color: yellow;color:var(--black)}#board span[num]:before{content:attr(num);position:absolute}#board span[num="2"]{--bg-color: var(--sub-bg-color);color:var(--color)}#board span[num="4"]{--bg-color: lightyellow}#board span[num="8"]{--bg-color: #fa7}#board span[num="16"]{--bg-color: orange}#board span[num="32"]{--bg-color: coral}#board span[num="64"]{--bg-color: red}#board span[num="128"]{--bg-color: #ff7}#controller{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gap-3);margin:var(--gap) 0}#controller div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--gap-3)}#controller button{border:1px solid var(--bd-color);border-radius:.5em;height:2.25em;width:5em;background:rgba(0,0,0,0);cursor:pointer;transition:.1s color,.1s border-color}#controller button:hover,#controller button:focus{border-color:var(--color)}#controller button:active,#controller button.click{border-color:var(--theme-color);color:var(--theme-color)}