#content.fullscreen > .widget{display:none}
.widget{position:absolute;background:rgba(0,0,0,0.4);color:#fff;padding:4px;border-radius:2px;opacity:0;transition:0.5s opacity;white-space:normal;text-align:left;image-rendering:pixelated;image-rendering:-moz-crisp-edges}
.widget > p{margin:0;width:56px;height:56px;background-repeat:no-repeat}
.widget p:hover{background-position:-56px 0}
.widget p.party{background-image:url(/pokengine.b-cdn.net/play/images/widgets/party.webp)}
.widget p.bag{background-image:url(/pokengine.b-cdn.net/play/images/widgets/bag.webp)}
.widget p.chat{background-image:url(/pokengine.b-cdn.net/play/images/widgets/chat.webp)}
.widget p.dex{background-image:url(/pokengine.b-cdn.net/play/images/widgets/dex.webp)}
.widget p.game{background-image:url(/pokengine.b-cdn.net/play/images/widgets/game.webp)}
.widget p.townmap{background-image:url(/pokengine.b-cdn.net/play/images/widgets/townmap.webp)}
.widget p.settings{background-image:url(/pokengine.b-cdn.net/play/images/widgets/settings.webp)}
.widget p.guide{background-image:url(/pokengine.b-cdn.net/play/images/widgets/guide.webp)}
.widget p.trading{background-image:url(/pokengine.b-cdn.net/play/images/widgets/trading.webp)}
.widget p.quests{background-image:url(/pokengine.b-cdn.net/play/images/widgets/quests.webp)}
.widget > canvas,.widget > div{position:relative;display:none}

.widget.chat.open,.widget.party.open,.widget.bag.open{padding:0}
.widget.open > div{display:block}

.widget .resize-n{position:absolute;top:0;left:0;width:100%;height:4px;cursor:n-resize}
.widget .resize-e{position:absolute;top:0;right:0;width:4px;height:100%;cursor:e-resize}
.widget .resize-w{position:absolute;top:0;left:0;width:4px;height:100%;cursor:w-resize}
.widget .resize-s{position:absolute;left:0;bottom:0;width:100%;height:4px;cursor:s-resize}
.widget .resize-ne{position:absolute;right:0;top:0;width:4px;height:4px;cursor:ne-resize}
.widget .resize-se{position:absolute;right:0;bottom:0;width:4px;height:4px;cursor:se-resize}
.widget .resize-nw{position:absolute;left:0;top:0;width:4px;height:4px;cursor:nw-resize}
.widget .resize-sw{position:absolute;left:0;bottom:0;width:4px;height:4px;cursor:sw-resize}

#battles .widget.chat{background:none;border-left:1px solid rgba(0,0,0,0.1)}

#widgets-cover{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:5}

#pause{background:#a58ebf;padding:4px;border-radius:2px}
#pause .widget{position:static;display:inline-block;margin:4px;opacity:1;cursor:pointer;vertical-align:top}
#pause .widget.disabled *{filter:grayscale(100);opacity:0.5}

#content > .widget div.party,#fullscreen div.party{background:#232323;border-radius:2px}
#party,#summary-container,#bag{position:relative;width:268px;height:204px;padding:2px}
#party > div,#bag .item{position:relative;display:inline-block;margin:2px;width:84px;height:96px;background:rgba(255,255,255,0.2);border-radius:2px;cursor:pointer;vertical-align:top}
#sim-widgets #party > div{background:rgba(0,0,0,0.4)}
#party > div.selected,#bag .item.selected,#pause .widget.selected{background:#91c9f7 !important}
#party.moving > div.selected,#bag .item-container.moving .item.selected{background:#87cc93 !important}
#party > div.dragging,#summary .moves-container .dragging,#bag .item.dragging,#pc .mon.dragging{position:absolute !important;z-index:1000}
#party > div.hidden,#bag .item.hidden{visibility:hidden}
#party > div.empty{cursor:default}
#party > div.fainted{filter:grayscale(100)}
#party > div.flash{animation:flash 1s infinite}
#party > div:hover:not(.empty):not(.dragging):not(.selected),#bag .item:hover:not(.empty):not(.dragging):not(.selected){background:rgba(0,0,0,0.1) !important}
#party img{position:absolute}
#party .item{left:46px;top:52px}
#party .status{left:50%;top:50%;transform:translate(-50%,-50%)}
#party .status.asleep{transform:translate(-60%,-100%)}
#party .status.burned,#party .status.poisoned,#party .status.badlypoisoned{transform:translate(-50%,-65%)}
#party .status.badlypoisoned{filter:brightness(0.4)}
#party .status.form-change{transform:translate(-50%,-56%)}
#party .status.level-up{transform:translate(-42%,-56%)}
#party .status.level-up-title{transform:translate(-42%,-42%)}
#summary-container{display:none;position:relative;padding:4px;width:260px;left:4px;overflow:hidden}
#summary-container.flash{animation:flash 1s infinite}
#summary-container .prev,#summary-container .exit,#summary-container .next{position:absolute;top:10px;height:16px;cursor:pointer}
#summary-container > div:not(#summary):hover,#summary-container .exit:hover,#summary-container .prev:hover,#summary-container .next:hover,.bag .pocket:hover:not(.selected),
#fav-item:hover,#sort-items:hover,#toss-item:hover,#toss-item-0:hover,#toss-item-1:hover,#toss-item-2:hover,#items-page-down:hover,#items-page-up:hover{opacity:0.5}
#summary-container .name-canvas{position:absolute;left:0;top:10px}
#summary-container .prev{left:175px;width:32px;background:url(/pokengine.b-cdn.net/play/images/summary/prev_new.webp)}
#summary-container .next{left:204px;width:32px;background:url(/pokengine.b-cdn.net/play/images/summary/next_new.webp)}
#summary-container .exit{left:233px;width:27px;background:url(/pokengine.b-cdn.net/play/images/summary/back_new.webp)}
#summary-container .up,#summary-container .down{position:absolute;left:0;top:7px;width:18px;height:16px;background:url(/pokengine.b-cdn.net/play/images/summary/updown.webp);cursor:pointer}
#summary-container .down{top:17px;background-position:0 -16px}
#summary-container .move{position:relative;margin-bottom:2px;vertical-align:top;touch-action:manipulation;-webkit-touch-callout:none}
#summary,#pc{background:url(/pokengine.b-cdn.net/play/images/summary/bg.gif)}
#summary{position:absolute;left:0;top:4px;width:1040px;height:196px;transition:0.5s left}
#summary > *{position:absolute}
#summary .mon-container{left:18px;top:60px;width:104px;height:96px}
#summary .mon-container > *,#dex .mon-front > *{position:absolute;left:0;right:0;bottom:2px;margin:0 auto}
#summary .mon-container > *{top:0;bottom:0;margin:auto}
#summary .moves-container{left:264px;top:73px;width:98px;height:114px;touch-action:manipulation}
#summary .moves-container div{position:relative;width:98px;height:29px}

@keyframes flash{
0%{opacity:1}
50%{opacity:0.5}
100%{opacity:1}
}

.floating{animation:floatY 4s infinite}
@keyframes floatY{
0%{bottom:var(--b)}
50%{bottom:var(--t)}
100%{bottom:var(--b)}
}

.page-up,.page-down,.page-left,.page-right{position:absolute;width:16px;height:16px;background:url(/pokengine.b-cdn.net/play/images/dex/gui.webp) -212px -40px;cursor:pointer}
.page-down{background-position:-228px -40px}
.page-left{background-position:-212px -56px}
.page-right{background-position:-228px -56px}
.page-up:hover,.page-down:hover,.page-left:hover,.page-right:hover{opacity:0.5}

#content > .widget div.bag,#fullscreen div.bag{background:linear-gradient(to bottom,#202020,#202020 56px,#eef1e7 15px);border-radius:2px}
.bag .pocket,#fav-item,#sort-items,#toss-item{position:absolute;top:28px;width:28px;height:22px;background:url(/pokengine.b-cdn.net/play/images/bag/gui.webp);cursor:pointer}
.bag .pocket.selected{height:28px;cursor:default}
.bag .pocket.notselected{filter:grayscale(100)}
#bag{width:268px;height:180px;margin-top:50px}
#bag .item-container{position:relative;height:100%;overflow:hidden}
#bag .item{width:40px;height:40px;background:rgba(0,0,0,0.4);padding:2px;margin:4px 2px 0 2px}
#bag .item.tm{width:calc(100% - 4px);height:22px}
#bag .item canvas{position:absolute;left:2px;top:2px}
#bag-top{position:absolute;left:4px;top:4px}
#toss-item{left:223px;top:59px;width:10px;height:11px;background-position:-196px -55px}
#toss-item-sure{position:absolute;left:4px;top:140px}
#toss-item-0,#toss-item-1,#toss-item-2{position:absolute;left:24px;top:180px;cursor:pointer}
#toss-item-1{left:96px}
#toss-item-2{left:192px}
#fav-item{left:248px;top:61px;width:11px;height:9px;background-position:-174px -57px}
#fav-item.selected{background-position:-185px -57px}
#items-page-up{left:145px;top:8px}
#items-page-down{left:161px;top:8px}
#sort-items{left:165px;top:9px;width:13px;height:13px;background-position:-161px -5px}
#close-item{position:absolute;left:0;top:0;width:100%;height:100%;background:#202020;border-radius:2px}
#item-amount{position:absolute;left:236px;top:57px;width:26px;height:16px;cursor:pointer}

/** Item flavor (description) vertical scrollbox */
#item-flavor-scrollbox {
    position: absolute;
    left: 62px;
    top: 82px;
    width: 201px; /* 195 for the text canvas + 2 px pad + 4 px scrollbar */
    height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
}

#item-flavor-scrollbox canvas {
    display: block;
}

#item-flavor-scrollbox::-webkit-scrollbar {
    width: 4px;
}

#item-flavor-scrollbox::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#item-flavor-scrollbox::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.widget.dex.open{background:#334751}
#dex{position:relative;width:260px;height:100%;background:url(/pokengine.b-cdn.net/play/images/dex/bg.gif)}
#fullscreen #dex{border-radius:2px;overflow:hidden;transform:translateZ(0)}
#dex .dex-container{position:relative;height:calc(100% - 84px);margin-top:23px;overflow:hidden}
#dex .dex,#dex .back,#dex .mon,#dex-area,#dex-cry,#dex-site,#dex-prev-form,#dex-next-form{position:absolute;background:url(/pokengine.b-cdn.net/play/images/dex/gui.webp) 0 -40px;cursor:pointer}
#dex .dex{position:relative;width:212px;height:38px;margin:0 0 2px 24px}
#dex .dex:hover:not(.selected){background-position:0 -78px}
#dex .dex.selected{background-position:0 -352px}
#dex .page-up{right:1px;top:3px}
#dex .page-down{right:1px;top:21px}
#dex .back{left:2px;top:15px;width:28px;height:10px;background-position:-212px -72px}
#dex .back:hover,#dex-area:hover,#dex-cry:hover,#dex-site:hover,#dex-prev-form:hover,#dex-next-form:hover{opacity:0.5}
#dex .back.two{left:204px;top:6px}
#dex .mon-container{position:relative;height:calc(100% - 40px);padding:2px 0;overflow:hidden}
#dex .mon{position:relative;display:inline-block;left:auto;margin:2px 0 2px 5px;width:46px;height:46px;background-position:0 -156px;vertical-align:top}
#dex .mon div{width:100%;height:100%}
#dex .mon img,#bag .item img{position:absolute;left:-50px;right:-50px;top:-50px;bottom:-50px;margin:auto}
#dex .not-caught{filter:brightness(0);opacity:0.5}
#dex .mon.empty{background-position:-92px -156px;cursor:default}
#dex .mon.selected{background-position:-46px -156px}
#dex .mon:hover:not(.empty):not(.selected){background-position:-46px -156px}
#dex-page-left{left:182px;top:2px}
#dex-page-right{left:238px;top:2px}
#dex .mon-front{position:absolute;left:12px;top:28px;width:96px;height:96px;cursor:pointer}
#dex-area{left:0;top:223px;width:52px;height:18px;background-position:-138px -156px}
#dex-cry{left:208px;top:223px;width:52px;height:18px;background-position:-138px -174px}
#dex-site{left:48px;top:223px;width:164px;height:18px;background-position:0 -334px}
#dex-prev-form{left:119px;top:116px;width:30px;height:16px;background-position:-172px -334px}
#dex-next-form{left:233px;top:116px;width:27px;height:16px;background-position:-202px -334px}
#dex .registered{position:absolute;left:0;top:0px;width:260px;height:244px;background:url(/pokengine.b-cdn.net/play/images/dex/registered.webp) no-repeat center;transition:0.5s opacity}

#pc{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges}
#pc canvas{position:absolute;left:0;top:0}
#pc canvas.main{width:100%;height:100%}
#pc canvas.prev{top:7px}
#pc canvas.next{left:auto;right:0px;top:7px}
#pc canvas.back{left:auto;top:auto;right:0;bottom:0}
#pc canvas.global{left:0;top:auto;bottom:0}
#pc canvas.trade{left:163px;top:auto;bottom:0}
#pc canvas.up{left:52px;top:9px}
#pc canvas.down{left:auto;right:52px;top:9px}
#pc .prev:hover,#pc .next:hover,#pc .back:hover,#pc .global:hover,#pc .trade:hover,#pc .up:hover,#pc .down:hover,#pc .mon:hover:not(.dragging){opacity:0.5}
#pc .mon-container,#pc .mons,#pc .mon canvas{position:absolute;left:0}
#pc .mon-container{overflow:hidden}
#pc .mon{position:relative;display:inline-block;vertical-align:top}
#pc .mon.selected{background:#8b9490}
#pc .mon.highlight{background:#4ea9ff}
#pc .mon.selectedHighlight{background:#26629b}
#pc .mon.multipleSelected{background:#ff784e}
#pc .mon.flash{animation:flash 1s infinite}

.townmap-canvas{position:absolute}

#guide{height:100%;cursor:pointer}

#trading-you,#trading-them{position:absolute;left:22px;top:102px;width:98px;height:100px;background:url(/pokengine.b-cdn.net/play/images/trading/balls.webp)}
#trading-you.clickable,#trading-them.clickable{cursor:pointer}
#trading-you.accepted,#trading-them.accepted{background-position-y:-100px}
#trading-you > img,#trading-them > img,#trading-you > canvas,#trading-them > canvas{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
#trading-you.flash{animation:flash 1s infinite}
#trading-them{left:102px;top:22px;background-position-x:-98px}
#trading-accept,#trading-clear{display:none;position:absolute;left:90px;top:169px;width:31px;height:33px;background:url(/pokengine.b-cdn.net/play/images/trading/buttons.webp);cursor:pointer}
#trading-accept:hover,#trading-clear:hover{background-position-x:-31px}
#trading-clear{left:21px;top:102px;background-position-y:-66px}
#trading-accept.accepted{background-position-y:-33px}
#trading-item-you{display:none;position:absolute;left:3px;bottom:3px;width:46px;height:32px;background:url(/pokengine.b-cdn.net/play/images/trading/item1.webp) no-repeat}
#trading-item-you > img{position:absolute;left:-2px;top:-2px}
#trading-item-them{display:none;position:absolute;right:3px;top:3px;width:46px;height:32px;;background:url(/pokengine.b-cdn.net/play/images/trading/item2.webp) no-repeat}
#trading-item-them > img{position:absolute;right:-2px;top:-2px}

#fullscreen,#in-game-widget{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;image-rendering:pixelated;image-rendering:-moz-crisp-edges;user-select:none}
#fullscreen{background:#141414;z-index:700000}
/*#fullscreen #game-container{top:50%;left:50%;transform:translate(-50%,-50%)}*/
#fullscreen #top-bar{display:flex !important;z-index:100}
#in-game-widget > div,#in-game-widget #widgets-cover > div{position:absolute;transform-origin:top left;transition:0.5s left}

#top-bar.in-game #pnn,#top-bar.in-game #motd{display:none}
#top-bar.in-game div{width:124px}
#top-bar.in-game #time-img{right:2px}
#top-bar.in-game #fps{flex:1}