#actionBut{
    z-index: 101;
    pointer-events:none;
    position:absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    transition: var(--buta);
    bottom:-50%;
    /* pointer-events: all; */
    text-align: center;
    transition: 2s bottom;
    white-space: nowrap;
}

#discord{
    background-image:url(../img/menu/discord.svg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    width:var(--36px);
    height:var(--24px);
    position:absolute;
    left: var(--8px);
    top: var(--70px);
    z-index:10000;
    transition: all 0.5s;
    margin-bottom:var(--24px);
}
.start #discord{
    top:var(--8px);
}
#discord:hover{
    filter:invert(100%);
}
#discord:hover::after{
    content:"chat on discord";
    position:absolute;
    left: 110%;
    font-size: var(--16px);
    bottom:0;
    font-weight:bold;
    white-space:nowrap;
}

#powerBar{
    position:absolute;
    bottom:calc(0 - var(--64px));
    transition:var(--botu);
}
#powerBar{
    bottom: -50%;
    z-index: 101;
    pointer-events: all;
    text-align: center;
    transition: 0.5s bottom;
    width: 100%;
    left: 0;
}

.player #actionBut, .player #sideBut, .player #modiBut, .god #powerBar{
    bottom: 0%;
}
.start #lowerBar, .start #actionBut, .start #powerBar, .dead #actionBut{
    bottom:-50% !important;
}

#lowerBar{
    pointer-events: all;
    position:absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: var(--ui-base);
    height: var(--70px);
    transition: var(--buta);
    filter: drop-shadow(0 0 var(--6px) black);
    z-index: 1;
}

.ibut{
    display: inline-block;
    border:var(--2px) solid black;
    background:white;
    border-radius:var(--12px);
    /* position: relative; */
    pointer-events: none;
    margin: 0 var(--1px);
    padding: var(--6px) var(--4px);
    opacity:0.5;
    text-align: center;
}
.ibut.partial{
    background: linear-gradient(white, gray);
}
.player #actionBut .ibut, .player #sideBut .ibut, .player #modiBut .ibut, .god #powerBar .ibut{
    pointer-events:all;
    opacity:1.0;
}
.attitude.button{
    padding: var(--4px);
}
.attitude.button:hover .img{
    width:100%;
    width: var(--64px);
    height: var(--64px);
}
.attitude.button .img{
    min-width: var(--36px);
    height: var(--36px);
    margin: var(--2px) var(--2px);
    image-rendering: pixelated;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-image: url(../img/menu/mixed.png);
}
.attitude[val="0"] .img{
    background-image: url(../img/menu/attack.png);
}
.attitude[val="1"] .img{
    background-image: url(../img/menu/retreat.png);
}
.attitude[val="2"] .img{
    background-image: url(../img/menu/flee.png);
}
.attitude[val="3"] .img{
    background-image: url(../img/menu/peace.png);
}
.butbar .act + .build{
    margin-left:var(--24px);
}
.ibut{
    overflow:hidden;
    position:relative;
    /* transition: all 2s; */
    max-width: var(--210px);
}
.broke{
    background: #d4a57c;

    >*{
        opacity: 0.5 !important;
    }
}
.ibut *{
    pointer-events:none;
}
.ibut .res{
    display:inline-block;
}
.inactive{
    background-color:gray;
}

.ibut:not(:hover) .detail span{
    /* display:none; */
    font-size: 0px;
    padding: 0;
}

.butbar .modi{
    font-size: 0;
    margin-top: 0;
    transition: var(--buta);
}
.ibut:hover .modi{
    font-size: var(--18px);
    margin-top: var(--6px);  
    &>div{
        font-size: var(--18px);
    }
}
.ibut .consume, .ibut .require, .ibut .owns, .ibut .modilist, .ibut .usage, .ibut .effect{
    font-size: 0;
    margin-top: 0;
    transition: var(--buta);
    padding-inline-start: 0;
    
 
    &>span{
        margin-bottom: 0;
        display: block;
    }
    &>div{
        font-size:0;
        transition: var(--buta);
    }
}
.ibut:hover{
    .consume, .require, .owns, .modilist, .usage, .effect{
        font-size: var(--18px);
        margin-top: var(--6px);  
        &>span{
            margin-bottom: var(--6px);
            display: block;
        }
        &>div{
            font-size: var(--20px);
        }
        .self, .dmg{
            font-size:var(--24px)
        }
    }
}
.butbar .cost>span{
    font-size:var(--12px);
}
.ibut .detail{
    /* font-size: 50%; */
    /* font-size: var(--16px); */
    /* font-size: var(--16px); */
    position: relative;
    pointer-events: none;
    text-align: center;
    /* line-height: 0; */
    font-size: 0;
    /* display: inline-block; */
    transition: var(--buta);
    /* text-align: center; */

    & i{
        /* display: block; */
        font-size: 0;
        transition: var(--buta);
        font-style: normal;
        white-space: normal;
    }
    
    .title{
       display: block;
       text-transform: capitalize;
       font-size: var(--24px);
       text-transform: capitalize;
       font-weight: bold;
       transition: var(--buta);
    }

    .mode{
        display: block;
        /* margin: 0; */
        /* padding: 0; */
        font-size: var(--12px);
        /* line-height: var(--12px); */
        position: absolute;
        /* width: 100%; */
        top: 63%;
        right: 0;
        background: #000000;
        padding: var(--2px) var(--4px);
        border-radius: var(--6px);
        color: white;
    }
}
.ibut:hover .detail{
    text-align:center;
    /* white-space: pre-line; */
    font-size: var(--28px);
    
    & i{
        display:block;
        font-size:var(--18px);
        font-style:normal;
    }
}
.butbar b{
        display:none;
        font-size:var(--16px);
        /* position:absolute; */
        background:white;
        /*transform:translateY(calc(-1 * var(--24px)));*/
        top:0;
        right:0;
        padding:var(--2px) var(--6px);
        margin:0;
        font-weight:normal;
        background:#a86c37;
        color:white;
        border-radius:var(--6px);
}
.ibut:hover b{
    display:block;
}

.ibut .detail img  {
    width: var(--32px);
    height: var(--32px);
    image-rendering: pixelated;
    margin-right: 0;
    padding: var(--2px) var(--4px);
    display: inline;
}
.ibut:hover .detail img{
    width: var(--64px);
    height: var(--64px);
    /* display: inline-block; */
}

.ibut .detail i tt img {
    width: 0px;
    height: 0px;
    image-rendering: pixelated;
    margin-right: 0;
    display: inline;
    padding: 0;
}

.ibut:hover .detail i tt img  {
    width: var(--16px);
    height: var(--16px);
    vertical-align: top;
    padding: var(--2px) 0 0 var(--2px);
}

#sideBut .destroy{
    background:black;
}

.destroy img{
    filter:invert();
}

.start #unitInfo{
    left:-50%;
}

.start #groupInfo{
    right:-50%;
}

#unit_id{
    position:absolute;
    top:var(--6px);
    right:var(--6px);
    font-size:var(--8px);
    color:blue;
}
#unit_xy{
    position:absolute;
    top:var(--6px);
    left:var(--6px);
    font-size:var(--8px);
    color:blue;
}
#unit_reg{
    position:absolute;
    bottom:var(--6px);
    right:var(--6px);
    font-size:var(--8px);
    color:blue;
}
.named{
    color:#a86c37;
    /* text-align: center; */
    font-size: var(--16px);
    margin-bottom: var(--8px);
    display: block;
}
#infoDiv{
    position:absolute;
    left:0;
    bottom: var(--80px);
    width: fit-content;
    /* min-width: var(--400px); */
    filter: drop-shadow(0 0 var(--6px) black);
}
#unitInfo{
    /* position:absolute; */
    /* bottom: 0; */
    /* left:0; */
    background:white;
    padding:var(--12px);
    border-radius:var(--12px);
    z-index: 100;
    pointer-events: all;
    /* max-width: 15%; */
    /* min-width: 15%; */
    display: none;
    /* margin-bottom: var(--16px); */
    transition: all 2s;
    /* width: fit-content; */
    width: var(--300px);
    /* filter: drop-shadow(0 0 var(--6px) black); */
    
    

    &.block{
        display: inline-block;
    }
    
    .detail{
        font-size:var(--18px)
    }
    .sect{
        font-weight:bold;
    }
    .change{
        display: inline-block;
        vertical-align: text-top;
    }
    .modi .price{
        display:block;
    }
    .name{
        font-size:var(--24px);
        text-transform: capitalize;
    }
    .dps, .hps{
        margin-left:var(--34px);
        font-size:var(--12px);
    }
    ul{
        margin:var(--2px);
    }
    .warn{
        background:#9f4bca;
        padding:var(--4px) var(--8px);
        text-align:center;
        color:white;
        border-radius:var(--12px);
        margin:var(--6px) 0;
        tt img{
            background:white;
            border-radius:50%;
            vertical-align: text-top;
            padding: var(--4px);
        }
    }
    img{
        width:var(--16px);
        height:var(--16px);
        image-rendering: pixelated;
    }

    .relevant{
        background:white;
        border-radius:var(--12px);
        border: var(--2px) solid gray;
        padding:var(--6px);
        margin-top:var(--6px);
    }
}

#groupInfo{
    position:absolute;
    right:0;
    background:white;
    border-radius:var(--12px);
    z-index: 100;
    pointer-events: all;
    min-width: 10%;
    display: inline-block;
    bottom: var(--64px);
    /* margin-bottom: var(--6px); */
    /*transition: all 2s;*/
    width: fit-content;
    color: black;
    
    &.open, &.show{
        margin-bottom: var(--16px);          
    }
    
    .detail{
        font-size:var(--18px)
    }
    .name{
        font-size:var(--24px)
    }
    ul{
        margin:var(--2px);
    }

    img{
        width:var(--16px);
        height:var(--16px);
        image-rendering: pixelated;
    }

    .product{
        font-size:var(--24px)
    }
    .relevant{
        background:white;
        border-radius:var(--12px);
        border: var(--2px) solid gray;
        padding:var(--6px);
        margin-top:var(--6px);
    }
}

.button:hover .modilist{
    margin:var(--12px);
    padding: 0;
    text-align: center;

    & tt{
        margin-right: var(--6px);
    }
    & img{
        height: var(--16px) !important;
        width: var(--16px) !important;
    }
}

.dead #unitInfo{
    display:none;
}

#unitInfoContent .action{
    font-style:italic;
    margin-bottom: var(--12px);
    border-radius:var(--12px);
    padding: var(--2px) var(--6px);
    font-size: var(
    --18px);
    text-align:center;
    white-space: nowrap;
}

#groupInfo{
    & .aggr{
        max-height: 50vh;
        /* column-width: var(--100px); */ /* Set the desired column width */
        /* column-gap: var(--px); */
        /* width: fit-content; */
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;
        
        
        
        
        
        
        & .sel_row{
            break-inside: avoid; /* Prevent items from breaking between columns */
            margin: var(--6px);
            width: var(--140px);
            /* display: block; */
        }
    }
}
#groupInfo.gbuild{
    & .aunit{
        opacity:0;
        pointer-events: none;
        
        [tooltip]{
            pointer-events:none;
        }
    }
    & .abuild{
        opacity:1;
        pointer-events: all;
        z-index: 1;
        
        [tooltip]{
            pointer-events:all;
        }
    }
}
#groupInfoContent{
    display:none;
    position: relative; 
    padding: var(--12px);
    font-size: var(--1px);
    flex-wrap: wrap;
    & .smaller{
        position: absolute;
        left: var(--12px);
        top: var(--12px);
        background: white;
    }
    & .abuild{
        opacity:0;
        pointer-events: none;

        [tooltip]{
            pointer-events:none;
        }
    }
}
.open #groupInfoContent, .show #groupInfoContent{
    font-size: var(--18px);
    padding: var(--12px);
    display:block;
}

.wip{
    background:#a86c37;
}
.dead{
    background:black;
    color:#a86c37;
}
.targeting{
    background:#9b0000;
    color: white;
    b{
        display:block;
    }
}
.following{
    background:#0295b8;
    color: white;
}
.holding{
    background:#000000;
    color: white;
}
.attacking{
    background:yellow;
}
.moving{
    background:#1b2a9e;
    color: white;
}
.assigned{
    background:#009b00;
}
.converting{
    background:#9a009b;
}

#unitInfoContent .head{
    /* white-space:pre; */
    margin-bottom:var(--12px);
    font-weight:bold;
    vertical-align: text-bottom;
    
    
    

    .name{
        display:inline-block;
        /* white-space: pre; */
        margin-left: var(--4px);
        max-width: 77%;
    }

    img{
        width:var(--24px);
        height:var(--24px);
        image-rendering: pixelated;
        vertical-align: top;
    }
}
#unitInfoContent .name img{
    vertical-align:text-top
}
#unitInfoContent .blk + .blk{
    margin-top:var(--12px);
}

#groupInfoContent .name{
    white-space:pre;
    margin-bottom:var(--12px);
    font-weight:bold;
}
#groupInfoContent .name img{
    vertical-align:text-top
}

#groupInfo, #unitInfo {
    & .title, & .title_group{
        display:none;
        white-space: nowrap;
        font-weight:bold;
        font-size: var(--16px);
    }
    & .title{
        /* margin-bottom: var(--12px); */
        padding: var(--12px);
    }
}

#groupInfoContent .detail + .aggr{
    margin-top:var(--12px);
}

#global{
    position:relative;
}
.title_group div{
    padding: var(--12px);
    display: inline-block;
    border-radius: var(--12px) var(--12px) 0 0;
    width: 50%;
    box-sizing: border-box;   
    &:hover{
        background:lightgray;
    }
}
.open:not(.show) .title_group div{
    width: calc(50% - var(--12px));
}
#closeGroup{
    position: absolute;
    width: var(--24px);
    background: #a86c37;
    right: 0;
    padding: var(--12px) 0;
    text-align: center;
    color: white;
    display:none;
}
.open:not(.show) #closeGroup{
    display:inline-block;
}
#gbuild{
    position:absolute;
    right:0;
    top:0;
    /* text-align:right; */
    background: #d4a57c;
    /* width: 50%; */
    min-width: var(--100px);
}
.open:not(.show) #gbuild{
    right: var(--24px);
}
.gbuild #gbuild, #gunit{
    /* position: relative; */
    background:white;
    /* z-index: 20; */
}
.gbuild #gunit{
    background: #d4a57c;
}

#groupInfo.both #global{
    display: block;
    background:black;
    border-radius: var(--12px) var(--12px) 0 0;
    min-width: var(--200px);
}
#groupInfo.global #_global{
    display:block;
}
#groupInfo.hover #hover{
    display:block;
}

#unitInfo.multi #multi{
    display:block;
}
#unitInfo.single #single{
    display:block;
}
#unitInfo.hover #hover{
    display:block;
}

.queueGroup{
    background:white;
    padding: var(--2px);
    border-radius:var(--12px);
    z-index: 101;
    pointer-events: all;
    display:inline-block;
    margin: var(--8px) var(--3px);
    vertical-align: bottom;
    height: var(--60px);
    position: relative;
    pointer-events: none;
}

.prepGroup{
    background:white;
    padding: var(--2px);
    border-radius:var(--12px);
    z-index: 101;
    pointer-events: all;
    display:inline-block;
    margin: var(--8px) var(--3px);
    vertical-align: bottom;
    height: var(
    --60px);
    position: relative;
}
.prepGroup .prep{
    padding: var(--6px);
    display:inline-block;
    border:var(--2px) solid gray;
    border-radius:var(--12px);
    position: relative;
}
.prepGroup div + div{
    margin-left:var(--6px);
}
.prepGroup img{
    width:var(--16px);
    height:var(--16px);
    image-rendering: pixelated;
}

.queueGroup .process{
    display: inline-block;
    position:relative;
    /* width:var(--64px); */
    background:#d3d3d3;
    border-radius: var(--12px);
    /* overflow:hidden; */
    margin: var(--2px);
    vertical-align: top;
    border: var(--2px) solid #808080;
    padding: var(--7px);
    line-height: var(--12px);
}
.process + .process{
    margin-left:var(--6px)
}
.queueGroup span{
    z-index:2;
    font-size: var(--18px);
    vertical-align:baseline;
    position: relative;
}
.queueGroup i{
    font-size:var(--12px);
    position:absolute;
    top:0;
    left:0;
    z-index:100;
}
.queueGroup b, .prepGroup b{
    font-size:var(--12px);
    background:#100d0d;
    display: block;
    position: absolute;
    z-index: 4;
    top:initial;
    right: calc( -1 * var(--6px));
    bottom: calc(-1 * var(--6px));
    pointer-events: all;

    &:hover{
        outline:var(--2px) solid white;
        background:gray;
    }
}
.queueGroup .percent{
    background:#808080;
    position:absolute;
    left: 0;
    top:0;
    height:100%;
    z-index: 0;
    /* border-radius: var(--6px); */
    border-radius: var(--6px);
}

.toggleGroup{
    background:white;
    padding: var(--3px);
    border-radius:var(--12px);
    z-index: 101;
    pointer-events: all;
    display:inline-block;
    margin: var(--8px);
    vertical-align: bottom;
}

.toggleGroup div{
    display:inline-block;
}
.toggleGroup .row{
    padding: var(--2px);
    border: var(--2px) solid lightgray;
    border-radius:var(--24px);
    margin:0 var(--6px);
    position: relative;
    line-height: var(--12px);
}
.toggleGroup .row:hover{
    border-color: gray;
}
.toggleGroup .prod, .queueGroup .prod{
    /* margin-right: var(--12px); */
    display: block;
    font-size: var(--12px);
    padding: 0 var(--6px);
}
#tools{
    position:absolute;
    top:var(--70px);
    right:0;
}
.wui{
    position:absolute;
    right: 0;
    /* background:white; */
    background-image:url(../img/menu/focus.png);
    height: var(--24px);
    width: var(--32px);
    background-size: var(--24px);
    /* background-size: contain; */
    /* position:absolute; */
    image-rendering: pixelated;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events:all;
    z-index: 200;
    font-size: var(--16px);
    transition: bottom 2s;
    padding: var(--4px);
}
.start .wui{
    bottom:-100%;
}
.wui:hover{
    background-color: #ffffff66;
    border-radius:var(--12px);
    z-index: 300;
}
.wui .info{
    display:none;
}
body.show_help #helpToggle:hover .on{
    display:none;    
}
body:not(.show_help) #helpToggle:hover .off{
    display:none;    
}

.full #fullscreen{
    background-image:url(../img/menu/small.png);
}
#fullscreen{
    background-image:url(../img/menu/full.png);
}
#helpToggle{
    background-image:url(../img/menu/help.png);
    right: var(--48px);
}
#focus{
    right: calc(2 * var(--48px));
}
#zoomOut{
    background-image:url(../img/menu/zoomOut.png);
    right: calc(3 * var(--48px));
}
#zoomIn{
    background-image:url(../img/menu/zoomIn.png);
    right: calc(4 * var(--48px));
}
.show_help #helpToggle{
    background-image:url(../img/menu/nohelp.png);
}
.wui:hover .info{
    display:block;
    position:absolute;
    right: 0;
    /* background:black; */
    color:white;
    z-index: 100000;
    white-space: nowrap;
    /* padding: var(--2px) var(--12px); */
    border-radius: var(--12px);
    top: 50%;
    /* transform: translateX(-50%); */
    pointer-events:none;
    top: var(--32px);
}

#unitDiv{
    position:absolute;
    bottom:0;
    left:0;
    width: inherit;
    margin-left: var(--6px);
}

._block_ #terrainInfo{
    display:none;
}

#unitInfo.block + #terrainInfo{
    right:0;
    left:initial;
    border: var(--2px) solid gray;
    border-radius: var(--12px) 0;
    border-width: var(--2px) 0 0 var(--2px);
    max-width: 45%;
}
#terrainInfo{
    position:absolute;
    bottom: 0;
    left: 0;
    /* transform: translateX(-50%); */
    background:white;
    padding: var(--12px);
    border-radius: var(--12px);
    font-size: var(--18px);
    /* filter: drop-shadow(0 0 var(--6px) black); */
    
    img {
        width: var(--16px);
        height: var(--16px);
        image-rendering: pixelated;
    }

    /*span + span{
        margin-left:var(--12px);
    }*/
    div{
        display: block;
        /* white-space:nowrap; */
    }
    span{
        white-space:nowrap;
        /* border: 1px solid red; */
        margin-right: var(--6px);
    }
}

#groupDiv{
    position:absolute;
    bottom:0;
    right: 0;
    width: inherit;
    margin-right: var(--6px);
    filter: drop-shadow(0 0 var(--6px) black);
}

#sideBut{
    z-index: 101;
    pointer-events:none;
    display:none;
    position:absolute;
    bottom: -50%;
    width: 100%;
    left: var(--4px);
    transition: 0.5s bottom;
}

#modiBut{
    z-index: 101;
    pointer-events:none;
    /* display:none; */
    position:absolute;
    bottom: -50%;
    width: 100%;
    right: var(--4px);
    transition: 0.5s bottom;
    direction: rtl;
}

.selection #sideBut, .placing #sideButt, .placing #modiBut{
    display: block;
}
#sideBut #destroy{
    color:white;
}
#sideBut #destroy.really:hover{
    background-color:red;
}
#destroy.really .detail>span:before{
    content:"really";
    display:block;
}

#sideBut #destroy.really:hover{
    background-color:black;
    color:white;
}
#hold.really .detail>span:before, 
#unload.really .detail>span:before{
    content:"in place";
    display:block;
    background:#333333;
    border-radius:var(--6px);
    color:white;
    padding: 0 var(--6px);
}
#rotation.really .detail>span:before{
    content:"clear rotation";
    display:block;
    background:#613a81;
    border-radius:var(--6px);
    color:white;
    padding: 0 var(--6px);
}

.ibut:hover{
    outline:var(--2px) solid white;
    z-index:200;
    padding: var(--8px);
}

#selectDiv {
    background: var(--ui-base);;
    border-top-left-radius: var(--12px);
}

prop{
    white-space:nowrap;
    /* font-size:var(--18px); */
}
group{
    display:block;
}

[tooltip]{
    position: relative;
    pointer-events: all;
    isolation: isolate;
}
[tooltip]:hover{
    background:lightgray;
    border-radius:var(--6px);
    overflow: visible;
}
/* Tooltip bubble */
[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;       /* place above the element */
  transform: translateX(-50%) scale(0.95);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  padding: var(--4px) var(--6px);
  border-radius: var(--6px);
  background: black;
  color: #fff;
  font-size: var(--10px);
  line-height: 1.25;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 9999;
  /* transition: opacity 0.5s ease, transform 0.5s ease; */
  display: block;
}

/* Show on hover (and keyboard focus) */
[tooltip]:hover::after,
[tooltip]:focus-visible::after {
  opacity: 1;
}