/* General */
body{margin:0;cursor:default;user-select:none;-moz-user-select:none}
body,html{position:fixed;width:100%;overscroll-behavior:none;overflow:hidden}
body,input,select,textarea{font:10pt verdana,sans-serif}
body,html,#scene,#stars,#content{height:100%}

canvas{vertical-align:top}

input{-webkit-appearance:none;-moz-appearance:none}
input[type=text]{background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);padding:8px;border-radius:2px}
input[type=text][disabled]{background:rgba(0,0,0,0.2);color:rgba(0,0,0,0.5)}
input[type=checkbox],input[type=radio]{display:inline-block;width:16px;height:16px;background:#fff;border:1px solid rgba(0,0,0,0.2);border-radius:2px;cursor:pointer;vertical-align:middle;margin:2px}
input[type=checkbox][disabled],input[type=radio][disabled]{opacity:0.5;cursor:default}
input[type=radio]{border-radius:16px;overflow:hidden}
input[type=checkbox]:checked:after,input[type=radio]:checked:after{content:'';display:block;background:#fff url(/pokengine.b-cdn.net/play/images/checkbox.gif) no-repeat;width:14px;height:14px}
input[type=range]{height:8px;background:rgba(0,0,0,0.1);border-radius:2px}
input[type=range][disabled]{opacity:0.2}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:0;background:url(/pokengine.b-cdn.net/play/images/favicon.webp);image-rendering:pixelated;cursor:pointer}
input[type=range]::-moz-range-thumb{-moz-appearance:none;width:16px;height:16px;border:0;background:url(/pokengine.b-cdn.net/play/images/favicon.webp);image-rendering:pixelated;cursor:pointer}
input[type=range]::-moz-range-track{background:none}
input[type=range]::-ms-thumb{background:rgba(0,0,0,0.5)}

*,*::before,*::after{-moz-box-sizing:border-box;box-sizing:border-box}

*:focus{outline:none}

::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:2px}
::-webkit-scrollbar-corner{background:transparent}

::selection{color:#fff;background:#000}

#login::-webkit-input-placeholder{color:rgba(255,255,255,0.5)}

/* Scene */
#scene{position:absolute;width:100%}
.sky{position:absolute;left:0px;right:0px;top:0px;bottom:0px;transition:0.5s opacity}
#sky{background:#26262b;background:linear-gradient(#26262b,#444)}
#sky-dawn{background:#3f668a;background:linear-gradient(#3f668a,#ece5b4);opacity:0}
#sky-day{background:#699ccc;background:linear-gradient(#699ccc,#96e6ff);opacity:0}
#sky-dusk{background:#3f668a;background:linear-gradient(#3f668a,#d2b037);opacity:0}
#sky-night{background:#464a83;background:linear-gradient(#464a83,#8582c2);opacity:0}
#scene.dawn #sky-dawn,#scene.day #sky-day,#scene.dusk #sky-dusk,#scene.night #sky-night{opacity:1}
#scene[data-halloween="true"] .sky{background:#55421e;background:linear-gradient(#55421e,#d1a042)}

#stars{position:relative;opacity:0;transition:1s opacity}
#scene.dawn #stars,#scene.dusk #stars{opacity:0.5}
#scene.day #stars{opacity:0}
#scene.night #stars{opacity:1}
.star{background:#eee;position:absolute;width:1px;height:1px}

#footer{color:rgba(0,0,0,0.2);text-align:center;position:absolute;width:100%;bottom:0px}
#footer p{margin:0px;padding:20px}

.cloud{position:absolute;width:441px;height:150px;background:url(/pokengine.b-cdn.net/play/images/clouds.webp);transition:0.5s opacity;opacity:0.1}
#scene.day .cloud{opacity:0.5}
#scene.dusk .cloud{opacity:0.2}
#scene[data-halloween="true"] .cloud{opacity:0.2;filter:brightness(0)}
.cloud.one{left:-80px;top:-80px}
.cloud.two{left:calc(50% - 300px);top:-120px}
.cloud.three{right:0px;top:-50px}

.grass{padding:20px 16px 0 16px;background:url(/pokengine.b-cdn.net/play/images/grass.webp) repeat-x;margin-top:8px;position:relative;height:130px}
#scene:not(.dawn):not(.day) .grass,#scene.dusk .grass,#scene.night .grass{filter:brightness(0.6)}
#scene[data-halloween="true"] .grass{filter:brightness(0) contrast(0.8) !important}

/* Top bar */
#top-bar{position:absolute;left:0;top:0;display:flex;width:100%;background:rgba(0,0,0,0.4);color:#fff;line-height:32px;opacity:0;transition:0.5s opacity}
#top-bar div{position:relative;width:212px;height:32px;padding-left:45px;background:rgba(0,0,0,0.4) url(/pokengine.b-cdn.net/play/images/pnn/symbols.webp) no-repeat 5px 12px}
#top-bar #time-img{position:absolute;right:90px;display:inline-block;width:32px;height:28px;margin-top:2px;vertical-align:top;background:url(/pokengine.b-cdn.net/play/images/pnn/time-of-day.webp)}
#top-bar #time-img.dawn{background-position:0px 0px}
#top-bar #time-img.day{background-position:-32px 0px}
#top-bar #time-img.dusk{background-position:-64px 0px}
#top-bar #time-img.night{background-position:-96px 0px}
#top-bar div:hover #time-img:after{content:'';position:relative;left:-51px;top:32px;display:block;width:135px;height:67px;background:url(/pokengine.b-cdn.net/play/images/pnn/time-of-day-modal.webp?1);z-index:10000}
#top-bar div:hover #time-img:before{content:'';position:absolute;left:-46px;top:44px;display:block;width:5px;height:5px;background:url(/pokengine.b-cdn.net/play/images/pnn/selected.webp);z-index:10001}
#top-bar div:hover #time-img.dawn:before{top:44px}
#top-bar div:hover #time-img.day:before{top:58px}
#top-bar div:hover #time-img.dusk:before{top:72px}
#top-bar div:hover #time-img.night:before{top:86px}
#top-bar div canvas{position:absolute;right:-5px;background:url(/pokengine.b-cdn.net/play/images/pnn/pnn.webp);vertical-align:top}
#motd{flex:1;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fps{padding:0 4px;white-space:nowrap;height:32px;text-align:right}
#fps::before{content:'FPS: '}
#content.fullscreen #top-bar{display:none}

/* Content */
#content{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}
#content.dragging,#content.dragging *{cursor:default !important}
#content.resize-n,#content.resize-n *{cursor:n-resize !important}
#content.resize-e,#content.resize-e *{cursor:e-resize !important}
#content.resize-w,#content.resize-w *{cursor:w-resize !important}
#content.resize-s,#content.resize-s *{cursor:s-resize !important}
#content.resize-ne,#content.resize-ne *{cursor:ne-resize !important}
#content.resize-se,#content.resize-se *{cursor:se-resize !important}
#content.resize-nw,#content.resize-nw *{cursor:nw-resize !important}
#content.resize-sw,#content.resize-sw *{cursor:sw-resize !important}

button{line-height:16px;padding:4px 8px;border-radius:2px;cursor:pointer;background:rgba(255,255,255,0.4);color:#fff;border:0;margin:1px}
button:hover{background:rgba(255,255,255,0.3)}

#cover{position:absolute;left:0;top:0;z-index:800000;width:100%;height:100%;transition:0.5s background}

/* Login */
#login{position:absolute;left:calc(50% - 200px);top:30%;width:400px;padding:28px 24px 8px 24px;border-radius:2px;background:rgba(0,0,0,0.4);color:#fff;transition:0.5s opacity;text-align:center;opacity:0}
#login button{margin-top:4px}
#login img{position:absolute;left:-215px;top:-180px}
#login input{position:relative;background:rgba(0,0,0,0.4);color:#fff;margin-bottom:4px;width:100%;border:0;padding:8px;border-radius:2px}
#login input[disabled]{color:rgba(255,255,255,0.2)}
#login-error,.login-warning{display:none;background:#da5454;padding:8px;border-radius:2px;margin-bottom:8px}
#login-error a{color:#fff}
.login-warning{display:block;background:#ffc864;color:#000}
.login-warning h1{margin:0 0 8px 0}
.login-or,#reload-button{display:none}

/* Achievement */
.achievement{position:absolute;right:0;bottom:0;width:260px;height:0;background:#232323;border-top-left-radius:2px;color:#fff;transition:0.5s height;box-shadow:1px 1px 8px rgba(0,0,0,0.5);z-index:900000;overflow:hidden}
.achievement img{float:left;border-radius:2px;margin:8px}
.achievement p{margin:12px 0 8px 0;font-size:80%;color:#808080}

/* Desktop */
#close,#maximize,#minimize{position:absolute;right:0;top:0;width:32px;height:32px;line-height:32px;text-align:center;background:url(/pokengine.b-cdn.net/play/images/buttons.webp);z-index:900000}
#maximize{right:32px;background-position:0 -32px}
#maximize.restore{background-position:0 -64px}
#minimize{right:64px;background-position:0 -96px}
#close:hover{background-color:#d83b3b}
#maximize:hover,#minimize:hover{background-color:rgba(0,0,0,0.4)}