html,body{user-select:none;-webkit-touch-callout:none}

#login{width:calc(100% - 8px);left:4px;padding:8px}
#login img{display:none}
.login-or{display:inline-block;margin:0 8px}
#reload-button{display:inline-block}

.cloud{display:none}

#settings-container{display:flex;left:-100%;top:0;width:100%;height:100%;flex-direction:column}
#settings-container.show{left:0}
#settings-container.hide{left:-100%}
#settings-tabs .tab{height:24px}
#settings{width:100%;border-radius:0;flex:1;height:calc(100% - 24px)}
#settings-inner{width:100%;height:100%}

.chat-popup{width:100%}

@media (orientation: portrait) {
.chat-popup{bottom:-140px;top:auto}
.chat-popup.on-screen{bottom:-80px;top:auto}
}

@media (orientation: landscape) {
.chat-popup{top:-160px}
.chat-popup.on-screen{top:-20px}
}

#fullscreen{background:#c3beba}
#fullscreen #game-container{outline:4px solid #908d91;top:50%;left:50%;transform:translate(-50%,-50%)}
#fullscreen #game-container:after{content:'Pok\e9ngine Game Guy';position:absolute;left:8px;top:300px;color:#4e4c91;font-family:nintendo;font-size:20px}
.mobile-button{position:absolute;width:50px;height:50px;background:#9d2459;border-radius:100%;box-shadow:1px 1px 0 rgba(0,0,0,0.5);cursor:pointer;text-align:center;line-height:50px;color:#fff}
.mobile-button.pressed{background:linear-gradient(135deg,#9d2459 0%,#d0d0d0)}
.mobile-button.A{right:8px;top:calc(75% - 20px)}
.mobile-button.A:after{content:'A'}
.mobile-button.B{right:60px;top:calc(75% + 35px)}
.mobile-button.B:after{content:'B'}
.mobile-button.X{right:60px;top:calc(75% - 75px)}
.mobile-button.X:after{content:'X'}
.mobile-button.Y{right:114px;top:calc(75% - 20px)}
.mobile-button.Y:after{content:'Y'}
.mobile-button.L{height: 35px;left: 25px;top: calc(75% - 140px);border-radius: 10px;width: 100px;line-height: 35px;font-family:nintendo;}
.mobile-button.L:after{content: 'L'; font-size: 20px;}
.mobile-button.R{height: 35px;right: 25px;top: calc(75% - 140px);border-radius: 10px;width: 100px;line-height: 35px;font-family:nintendo;}
.mobile-button.R:after{content: 'R'; font-size: 20px;}
.mobile-button.start{height:25px;left:calc(50% + 40px);top:calc(75% + 100px);background:#807a7f;border-radius:10px;transform: translateX(-50%);}
.mobile-button.start:after{content:'Start';position:relative;top:10px;color:#4e4c91;font-family:nintendo;font-size:16px}
.mobile-button.start.pressed{background:linear-gradient(180deg,#807a7f,#151515)}
.mobile-button.select {height: 25px;left: calc(50% - 40px);top: calc(75% + 100px);background: #807a7f;border-radius: 10px;transform: translateX(-50%);}
.mobile-button.select:after {content: 'Select';position: relative;top: 10px;color: #4e4c91;font-family: nintendo;font-size: 16px;}
.mobile-button.select.pressed{background: linear-gradient(180deg, #807a7f, #151515);}
.mobile-button-dirpad{position:absolute;left:8px;top:calc(75% - 70px);width:150px;height:150px}
.mobile-button-mid{display:block;position:absolute;left:50px;top:50px;width:50px;height:50px;z-index:2;background:radial-gradient(circle farthest-side,#0e0e0e,#1b1c1f 60%,#222326 70%);box-shadow:1px 1px 0 rgba(0,0,0,0.5)}
.mobile-button.up{left:50px;top:0;background:#222326;border-radius:4px 4px 0 0}
.mobile-button.up.pressed{background:linear-gradient(0deg,#222326 25%,#888)}
.mobile-button.down{left:50px;top:100px;background:#222326;border-radius:0 0 4px 4px;z-index:3}
.mobile-button.down.pressed{background:linear-gradient(180deg,#222326 25%,#888)}
.mobile-button.left{left:0;top:50px;background:#222326;border-radius:4px 0 0 4px}
.mobile-button.left.pressed{background:linear-gradient(270deg,#222326 25%,#888)}
.mobile-button.right{left:100px;top:50px;background:#222326;border-radius:0 4px 4px 0;z-index:3}
.mobile-button.right.pressed{background:linear-gradient(90deg,#222326 25%,#888)}

#fullscreen .widget.chat{display:block;left:100%;top:0;width:100%;height:100%;border-radius:0;visibility:hidden;transition:0.5s left,0.5s visibility}
#fullscreen .widget.chat.show{left:0;visibility:visible}
#fullscreen #chat-container{width:100% !important;height:100% !important}
#fullscreen #chat-left{transition:0.5s max-width}
#fullscreen #chat-right{transition:0.5s width}
#fullscreen #chat-right.collapsed{width:0;display:block}

@media(orientation:portrait){
#fullscreen #game-container{top:24px;transform:translateX(-50%)}
.mobile-button.L,.mobile-button.R{background-color:#807a7f;}
}

@media(orientation:landscape){
#login{top:4px}
#fullscreen{background:#67599e}
#fullscreen #game-container{outline:4px solid #2b2f2d}
#fullscreen #game-container:after{content:'Game Guy Advance';left:calc(50% - 75px);top:calc(100% + 6px);color:#a8aaa7}
.mobile-button{background:#cacac8;color:#333}
.mobile-button.pressed{background:linear-gradient(135deg,#cacac8 0%,#151515)}
.mobile-button.A{top:calc(50% - 20px)}
.mobile-button.B{top:calc(50% + 20px)}
.mobile-button.X{top:calc(50% - 60px)}
.mobile-button.Y{top:calc(50% - 20px)}
.mobile-button.L,.mobile-button.R{top:calc(50% - 150px)}
.mobile-button.start{left:calc(150px + 40px);top:calc(50% + 120px);background:#cacac8;transform: translateX(-50%);}
.mobile-button.start:after{color:#392d64}
.mobile-button.start.pressed{background:linear-gradient(180deg,#cacac8 0%,#151515)}
.mobile-button.select {left: calc(150px - 40px);top: calc(50% + 120px);background: #cacac8;transform: translateX(-50%);}  
.mobile-button.select:after {color: #392d64;}  
.mobile-button.select.pressed {background: linear-gradient(180deg, #cacac8 0%, #151515);}
.mobile-button-dirpad{top:calc(50% - 70px)}
.mobile-button-mid{background:radial-gradient(circle farthest-side,#7b7b7b,#b3b3b3 60%,#cacac8 70%)}
.mobile-button.up{background:#cacac8}
.mobile-button.up.pressed{background:linear-gradient(0deg,#cacac8 0%,#151515)}
.mobile-button.down{background:#cacac8}
.mobile-button.down.pressed{background:linear-gradient(180deg,#cacac8 0%,#151515)}
.mobile-button.left,.mobile-button.right{background:#cacac8}
.mobile-button.left.pressed{background:linear-gradient(270deg,#cacac8 0%,#151515)}
.mobile-button.right.pressed{background:linear-gradient(90deg,#cacac8 0%,#151515)}
}

@font-face{font-family:nintendo;src:url(/pokengine.b-cdn.net/play/images/NES_Controller_MrShrike.ttf)}