@font-face{font-family:zig;src:url(assets/zig.ttf)}body{align-items:center;background-color:#000;display:flex;justify-content:center;margin:0;min-height:100vh;overflow:hidden}canvas{margin:auto;width:99%}input[type=number]{background-color:transparent;border:none;color:#fff;font-family:zig;width:60px}main{position:relative}.setting{background-color:#383838;color:#fff;font-family:zig;left:0;padding:4px 12px;position:absolute;top:0;transition-duration:.2s;z-index:9}.setting.off{transform:translateY(-100%)}.sp-controller{align-items:center;display:flex;justify-content:space-between;position:absolute;top:50%;transform:translateY(-50%);width:99%}#hideGUI{display:inline}.toggle{background-color:transparent;border:none;bottom:0;bottom:-20px;color:#fff;left:0;position:absolute}button[data-key]:active{background-color:hsla(0,0%,100%,.2)}.sp-controller button{background-color:transparent;border:1px solid #fff;color:#fff}.d-pad{display:grid;gap:5px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);margin-right:auto}.d-pad button{font-size:24px;height:60px;width:60px}.d-pad button:first-child{grid-row:2}.d-pad button:nth-child(2){grid-column:2}.d-pad button:nth-child(3){grid-column:3;grid-row:2}.d-pad button:last-child{grid-column:2;grid-row:3}.key{margin-left:auto;z-index:9}.key button{font-family:zig;height:86px;width:132px}@keyframes shake{0%{transform:translate(1px,1px)}10%{transform:translate(-1px,-2px)}20%{transform:translate(-3px)}30%{transform:translate(3px,2px)}40%{transform:translate(1px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(-3px,1px)}70%{transform:translate(3px,1px)}80%{transform:translate(-1px,-1px)}90%{transform:translate(1px,2px)}to{transform:translate(1px,-2px)}}@media screen and (max-width:440px){main{height:100vh}input[type=range]{height:4px}.setting{background-color:#383838;bottom:0;color:#fff;font-size:10px;left:0;padding:4px 12px;position:absolute;right:0;top:unset;transition-duration:.2s}.setting.off{transform:translateY(100%)}.toggle{bottom:unset;left:0;position:absolute;rotate:180deg;top:-20px}.sp-controller{align-items:center;display:flex;justify-content:space-between;position:absolute;top:50%;transform:translateY(-50%);width:100%;.d-pad{margin:auto}.key{margin:auto;button{display:block}}}}