:root{--cross-border-color:#aaa;--btn-size:3rem;--cross-bottom:4rem;--cross-left:0.5rem;--joystick-bottom:3rem;--joystick-left:10.5rem;--back-border-radius:0.75rem}*,:after,:before{box-sizing:border-box}body{background-color:#f5f5f4;position:relative}.flex{display:-webkit-flex;display:flex}.h-center{-webkit-justify-content:center;justify-content:center}.h-between{-webkit-justify-content:space-between;justify-content:space-between}button{background-color:#333}#ABXY,#cross{bottom:var(--cross-bottom);height:calc(var(--btn-size)*3);position:absolute;width:calc(var(--btn-size)*3)}#ABXY{right:var(--cross-left)}#ABXY button{border:none;border-radius:50%;font-size:1.5rem;height:var(--btn-size);padding:0;width:var(--btn-size)}#ABXY-1{color:#60a5fa}#ABXY-2{color:#facc15}#ABXY-3{color:#f87171}#ABXY-4{color:#4ade80}#cross{border-radius:50%;font-size:0;left:var(--cross-left);overflow:hidden}#cross button{color:#fff;font-size:0;height:var(--btn-size);width:var(--btn-size)}#cross-0,#cross-1,#cross-2,#cross-3,#cross-4,#cross-5,#cross-6,#cross-7,#cross-c{border:none;border-bottom:1px solid var(--cross-border-color);border-right:1px solid var(--cross-border-color)}#cross-1,#cross-2,#cross-3{border-right:none}#cross-3,#cross-4,#cross-5{border-bottom:none}#joystick-l,#joystick-r{bottom:var(--joystick-bottom);position:absolute}#joystick-l{left:var(--joystick-left)}#joystick-r{right:var(--joystick-left)}#back-left,#back-right{position:absolute;top:0}#back-left{left:0}#back-right{right:0}#back-left-2,#back-right-2{margin-bottom:.5rem}#back-left-2{border-radius:0 0 var(--back-border-radius) 0}#back-left-1{border-radius:0 var(--back-border-radius) var(--back-border-radius) 0}#back-right-2{border-radius:0 0 0 var(--back-border-radius)}#back-right-1{border-radius:var(--back-border-radius) 0 0 var(--back-border-radius)}#back-left button,#back-right button{border:none;color:#fff;display:block;font-size:1rem;height:calc(var(--btn-size)*1);width:calc(var(--btn-size)*3)}#bg-l,#bg-r{--size:125px;bottom:0;height:var(--size);position:absolute;width:var(--size);z-index:-1}#bg-l{background-color:#ef4444;left:0;-webkit-transform:translate(-50%,50%) rotate(45deg);transform:translate(-50%,50%) rotate(45deg);-webkit-transform-origin:center;transform-origin:center}#bg-r{background-color:#22d3ee;right:0;-webkit-transform:translate(50%,50%) rotate(45deg);transform:translate(50%,50%) rotate(45deg);-webkit-transform-origin:center;transform-origin:center}#page{left:50%;position:absolute;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}#page button{border:none;border-radius:var(--back-border-radius);color:#fff;display:block;font-size:16px;height:calc(var(--btn-size)*1);margin-bottom:.5rem;width:calc(var(--btn-size)*3)}#fullscreen{border-radius:0 0 var(--back-border-radius) var(--back-border-radius)!important}#gamepad-data{border:1px dashed #333;left:50%;padding:.5rem;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#gamepad-data *{margin:0}#gamepad-data b{margin-right:.5rem}body,html{height:100%;margin:0;overflow:hidden;padding:0;width:100%}*{box-sizing:border-box}