html,body{margin:0;height:100%;background:#d0e7f9;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.main{position:absolute;left:0;top:0;right:0;bottom:0;box-sizing:border-box;max-width:812px;border-radius:10px;margin:auto;box-shadow:0 0 0 5px #da4a4a,0 0 0 20px #474f51;background:#da4a4a;height:100%;max-height:414px;padding:10px}.panel{position:relative;height:100%;padding:20px;box-sizing:border-box;background:#f8f1d7;border-radius:15px;display:flex;flex-direction:row;box-shadow:inset 3px 3px #fffef7}.function-area{flex:1;display:flex;padding:0 20px;justify-content:center;flex-direction:column}.controller-area{position:relative;z-index:10;display:flex;flex-direction:row}.action-area{display:flex;flex-direction:row}.controller{position:relative;width:140px;height:140px;align-self:flex-end;filter:drop-shadow(0px -6px 0px rgba(255,255,255,.8))}.controller button{position:absolute;z-index:1;border:8px solid #474f51;background:#857b7a;color:#c5c5c5;font-size:14px;border-radius:15px;box-sizing:border-box;outline:0;width:56px;height:56px;left:50%;top:50%;user-select:none;transform:translate(-50%,-50%)}.controller::before{content:'';position:absolute;z-index:0;pointer-events:none;box-sizing:border-box;left:50%;top:50%;width:56px;height:56px;background:#857b7a;transform:translate(-50%,-50%)}.controller::after{content:'';z-index:2;position:absolute;pointer-events:none;box-sizing:border-box;width:42px;height:42px;border:8px solid #474f51;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 0 0 #736a6d,inset 0 2px 0 0 rgb(255 255 255/40%)}button.up.joydirection{top:0;transform:translate(-50%,0);border-bottom:0;height:50px;border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:inset 0 2px 0 0 rgb(255 255 255/50%)}button.right.joydirection{left:auto;right:0;transform:translate(0,-50%);border-left:0;width:50px;border-bottom-left-radius:0;border-top-left-radius:0;box-shadow:inset 0 0 0 0 #857b7a,inset 0 2px 0 0 rgb(255 255 255/40%),inset 0 2px 0 0 rgb(0 0 0/10%)}button.down.joydirection{top:auto;transform:translate(-50%,0);bottom:0;border-top:0;height:50px;border-top-right-radius:0;border-top-left-radius:0;box-shadow:inset 0 0 0 0 rgb(0 0 0/10%)}button.left.joydirection{left:0;transform:translate(0,-50%);border-right:0;width:50px;border-bottom-right-radius:0;border-top-right-radius:0;box-shadow:inset 0 2px 0 0 rgb(255 255 255/40%),inset 0 0 0 0 #857b7a,inset 0 0 0 0 rgb(0 0 0/10%)}.function{display:flex;padding:8px 15px;border-radius:50px;align-self:center;background:#da4a4a;box-shadow:5px 5px 0 rgba(255,255,255,.8)}.function button{user-select:none;margin:10px;height:28px;width:60px;outline:0;box-shadow:0 0 0 6px rgb(255 255 255/10%),inset 0 1px 0 0 rgb(255 255 255/40%);background:#857b7a;color:#c5c5c5;border-radius:15px}.action{display:flex;align-self:flex-end;flex-direction:column}.action button{user-select:none;width:56px;height:56px;background:#857b7a;border-radius:50%;outline:0;color:#c5c5c5;font-size:14px;border:5px solid #474f51;box-shadow:0 0 0 8px rgb(255 255 255/64%),inset 0 2px 0 0 rgb(255 255 255/40%),inset 0 3px 0 0 rgb(0 0 0/10%)}.action button:first-child{margin-right:24px}.controller button:active,.action button:active,.function button:active{background:#6b6565}#controls-fire-ab{margin-bottom:26px}#joystick_btn_AB{width:130px;height:56px;border-radius:20px;margin-right:0}.sign{position:absolute;font-weight:700;font-size:15px;font-style:italic;height:40px;right:0;top:0;background:#da4a4a;color:#f8f1d7;text-shadow:2px 0 #000;padding:0 0 15px 15px;letter-spacing:.1em;border-bottom-left-radius:15px;filter:drop-shadow(0 3px #fffef7)}.sign p{margin:5px 0;font-size:12px}.sign::before{content:'';position:absolute;width:15px;height:15px;left:-15px;top:0;background:radial-gradient( circle at left bottom,transparent 14px,#da4a4a 15px)}.sign::after{content:'';position:absolute;width:15px;height:15px;bottom:-15px;right:0;background:radial-gradient( circle at left bottom,transparent 14px,#da4a4a 15px)}.explain{position:absolute;left:0;top:30px;width:90px;height:30px;background:#857b7a;border-radius:5px;text-align:center;line-height:30px;color:#f8f1d7;font-weight:700;font-size:20px}.explain a,.sign a{color:#f8f1d7;text-decoration:none}.shuoming{position:fixed;left:0;top:0;background:#000000b0;width:100%;height:100%;z-index:888;display:none}.shuoming .tankuang{position:relative;background:#fff;width:80%;height:60%;top:20%;border-radius:10px;margin:0 auto;z-index:999}.shuoming .tankuang .biaoti{height:40px;line-height:40px;background-color:#da4a4a;color:bisque;text-align:center;border-top-right-radius:10px;border-top-left-radius:10px}.shuoming .neirong{width:94%;height:80%;text-align:center;padding:10px}.shuoming .guan{background:#857b7a;height:10%;line-height:46px;text-align:center;color:#fff;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.screen{flex:1;display:flex;width:100%;transition:.3s;background:#000;margin-bottom:5px;border-radius:10px;align-items:center;justify-content:center;overflow:hidden}.screen canvas{max-width:100%;max-height:100%}.nes-roms>select{width:200px}.nes-controls{margin-top:2px}.joybtn{border-top-color:#857b7a;border-right-color:#000;border-bottom-color:#000;border-left-color:#857b7a}@media screen and (orientation:portrait){.main{max-height:100%}.function-area{position:absolute;left:0;right:0;top:85px;bottom:180px;padding-bottom:80px}.function{position:absolute;bottom:0;align-self:flex-end;transform:translateX(20px);padding:2px 10px;border-radius:50px 0 0 50px;box-shadow:0 5px 0 rgba(255,255,255,.8)}.function::before{content:'';position:absolute;width:15px;height:15px;right:0;top:-15px;background:radial-gradient( circle at left top,transparent 14px,#da4a4a 15px)}.function::after{content:'';position:absolute;width:15px;height:15px;bottom:-15px;right:0;background:radial-gradient( circle at left bottom,transparent 14px,#da4a4a 15px)}.screen{margin-bottom:0;max-height:300px}.function button{width:56px;margin:10px}.action-area{flex:1;justify-content:flex-end}.action button:first-child{margin-right:20px}}@media screen and (orientation:landscape){}