:root{--dock-height:64px}
.has-blockbar{padding-bottom:var(--dock-height)}
.cq-dock{--cell:52px;--track-left:16px;--party-left:0px;position:fixed;bottom:0;left:0;right:0;z-index:40;overflow:visible;font-family:Arial,'Apple SD Gothic Neo',sans-serif;pointer-events:none}
.block-panel{position:relative;pointer-events:auto;height:var(--dock-height);padding:6px 0;background:#251817;image-rendering:pixelated}
.block-panel:before,.block-panel:after{content:"";position:absolute;top:0;bottom:0;background:url('assets/blockbar/wood-cap.png') right center/auto 100% no-repeat,url('assets/blockbar/wood-tile.png') right center/auto 100% repeat-x;z-index:2;pointer-events:none}
.block-panel:before{left:0;width:var(--track-left)}
.block-panel:after{right:0;width:calc(100% - var(--track-left) - var(--cell)*8);transform:scaleX(-1)}
.block-track{display:grid;grid-template-columns:repeat(8,var(--cell));align-items:center;width:calc(var(--cell)*8);height:100%;margin-left:var(--track-left);background:url('assets/blockbar/panel-back.png') center/100% 100% no-repeat;isolation:isolate}
.skill-block{--edge:url('assets/blockbar/edge-yellow.png');--bridge:url('assets/blockbar/bridge-yellow.png');grid-row:1;position:relative;width:var(--cell);height:var(--cell);padding:0;border:0;border-radius:0;background:none;cursor:pointer;image-rendering:pixelated;touch-action:manipulation;isolation:isolate}
.skill-block[data-hero="r999"]{--edge:url('assets/blockbar/edge-green.png');--bridge:url('assets/blockbar/bridge-green.png')}
.skill-block[data-hero="mew"]{--edge:url('assets/blockbar/edge-blue.png');--bridge:url('assets/blockbar/bridge-blue.png')}
.skill-block>img{position:absolute;left:7.0175%;top:7.0175%;width:85.965%;height:85.965%;image-rendering:pixelated}
.skill-block:before{content:"";position:absolute;inset:-8.333%;background:var(--edge) center/100% 100% no-repeat;z-index:1;pointer-events:none}
.skill-block:hover{filter:brightness(1.08)}
.skill-block:focus-visible{outline:2px solid #fff3ba;outline-offset:1px}
.skill-block.linked-next:after{content:"";position:absolute;left:89.035%;top:9.21%;width:21.93%;height:88.6%;z-index:2;background:var(--bridge) center/100% 100% no-repeat;pointer-events:none}
.block-pop{position:absolute;z-index:8;pointer-events:none;--pop:url('assets/blockbar/pop-yellow.png');--spark:url('assets/blockbar/spark-yellow.png');background:var(--pop) center/100% 100% no-repeat}
.block-pop[data-hero="r999"]{--pop:url('assets/blockbar/pop-green.png');--spark:url('assets/blockbar/spark-green.png')}
.block-pop[data-hero="mew"]{--pop:url('assets/blockbar/pop-blue.png');--spark:url('assets/blockbar/spark-blue.png')}
.block-pop i{position:absolute;width:14px;height:14px;left:calc(50% - 7px);top:calc(50% - 7px);background:var(--spark) center/contain no-repeat}
.party-window{position:absolute;bottom:calc(100% - 10px);left:0;right:0;height:417.6px;overflow:hidden;pointer-events:none}
.party-stage{position:absolute;bottom:0;left:var(--party-left);width:580px;height:417.6px;pointer-events:none;image-rendering:pixelated}
.dock-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){
 .cq-dock{--cell:min(44px,calc((100vw - 16px)/8));--track-left:calc((100% - var(--cell)*8)/2);--party-left:calc(50% - 145px)}
 :root{--dock-height:54px}
 .block-panel{padding:5px 0}
 .has-blockbar footer{padding-bottom:105px}
 .party-window{height:338.4px;bottom:calc(100% - 8px)}
 .party-stage{width:470px;height:338.4px}

}

.sera-touch{position:absolute;left:calc(var(--party-left) + 4px);bottom:calc(100% + 44px);width:76px;height:80px;background:none;border:0;padding:0;cursor:pointer;pointer-events:auto}
.sera-touch:focus-visible{outline:2px solid #ffd273;outline-offset:0;border-radius:50%}
@media(max-width:600px){.sera-touch{left:var(--party-left);bottom:calc(100% + 34px);width:65px;height:66px}}