*{box-sizing:border-box;font-family:Courier,Courier New,monospace}:root{--black: hsl(0, 0%, 15%);--darkest-gray: hsl(0, 0%, 20%);--dark-gray: hsl(0, 0%, 30%);--gray: hsl(0, 0%, 40%);--light-gray: hsl(0, 0%, 50%);--lightest-gray: hsl(0, 0%, 60%)}body{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%;width:100%;width:fit-content;height:fit-content;background-color:#262626;margin:0;padding:0}html{width:100dvw;height:100dvh;touch-action:none;display:flex;flex-direction:row;justify-content:center;align-items:center;overflow:auto;margin:0;padding:0}main{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;height:fit-content;width:fit-content;background-color:var(--black)}#gamebro{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid white;border-bottom:3px solid var(--light-gray);border-radius:32px;background-color:var(--lightest-gray);touch-action:none;min-height:fit-content;min-width:fit-content}#screen{background:#84a2c6;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;min-width:288px;min-height:216px;height:100%;aspect-ratio:4 / 3;border:1px solid hsl(0,0%,15%)}#top-controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:24px;margin-bottom:8px;padding-right:8px;padding-left:8px}#top-controls button{background-color:var(--lightest-gray);border-radius:20%;width:32px;height:24px;padding:0}#screen-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:fit-content;height:fit-content}#gamepad{display:flex;flex-direction:row;justify-content:space-between;width:100%;height:fit-content}#btnStart,#btnSelect{background-color:var(--lightest-gray);border-radius:20%;width:48px;height:24px}#gamepad-left{margin-top:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:end;gap:32px}#gamepad-right{margin-top:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:start;gap:32px}#dpad,#face{display:grid;grid-template-areas:" upleft up upright " "left center right" " downleft down downright ";justify-items:center;align-items:center;width:fit-content;height:fit-content}#dpad button{width:48px;height:48px;background-color:var(--light-gray)}#face button{width:48px;height:48px;border-radius:33%}#btnUp{grid-area:up;border-top-left-radius:33%;border-top-right-radius:33%;border-bottom:none}#btnDown{grid-area:down;border-bottom-left-radius:33%;border-bottom-right-radius:33%;border-top:none}#btnLeft{grid-area:left;border-top-left-radius:33%;border-bottom-left-radius:33%;border-right:none}#btnRight{grid-area:right;border-top-right-radius:33%;border-bottom-right-radius:33%;border-left:none}#btnCenter{width:48px;height:48px;grid-area:center;background-color:var(--light-gray);border:none}#btnY{background-color:#bab84a;grid-area:up}#btnX{background-color:#496697;grid-area:left}#btnB{background-color:#b35656;grid-area:right}#btnA{background-color:#4f9c4f;grid-area:down}button,p{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}p{pointer-events:none;font-size:16px;color:var(--black)}button{display:flex;justify-content:center;align-items:center;border:1px solid var(--gray)}svg{width:16px;height:16px;fill:var(--black);pointer-events:none}#dpad svg{width:24px;height:24px}.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none}