:root {
    --buta: all 0.5s linear;
  }
  
  body.player{
      --ui-base: #a86c37;
      --ui-base-edge:#5f2408;
  }
  
  body.local._block_{
      background:#533f3f;
  }
  
  body{
      --ui-base: #376ba8;
      --ui-base-edge:#203f64;
      background:black;
  }
  
  #botulog{
      position:absolute;
      right:0;
      top:0;
      padding-top: var(--64px);
      max-width: 20%;
      background: #00000061;
      border-radius:0 0 0 var(--12px);
      z-index: 20;
  }
  #botulog div{
      font-size:var(--16px);
      padding:var(--6px) var(--12px);
      color:white;
      transition:all 2s;
      text-align: right;
      white-space: pre-line;
      border-radius: var(--12px);
      border: var(--2px) solid red;
      margin-top: var(--4px);
  }
  #botulog div.fadeout{
      font-size:0;
      padding:0;
  }
  
  #version{
      position: absolute;
      left: 0%;
      padding:var(--12px);
      font-size: var(--12px);
      color:white;
      /* z-index: 10000; */
      /* bottom: var(--70px); */
      top: 30%;
      transform: rotate(90deg);
      width: var(--12px);
  }
  
  canvas{
      image-rendering: pixelated;
      position: absolute;
      top: var(--62px);
      left: 0;
      pointer-events: none;
  }
  canvas.events{
      pointer-events:all;
  }
  body{
      font-size: var(--28px);
      font-family: sans-serif;
  }
  #cursor{
      background-image:url(../img/cursor/point1.png);
      width:var(--16px);
      height:var(--16px);
      position:absolute;
      z-index:10000000;
      background-size:cover;
      pointer-events:none;
  }
  .go #cursor{
      background-image:url(../img/cursor/go1.png);
  }
  .fight #cursor{
      background-image:url(../img/cursor/fight1.png);
  }
  [data-tooltip]:hover::after {
      display: block;
      position: absolute;
      content: attr(data-tooltip);
      border: 1px solid black;
      background: #eee;
      padding: .25em;
    }
  .start #task{
      bottom:-50%;
  }
  #task{
      position:absolute;
      bottom: var(--70px);
      width:100%;
      transition: all 2s;
      color:white;
      background: #512d0d9e;
      text-align:center;
      z-index: 10;
      transition: all 2s;
  }
  #taskInfo{
      padding:var(--12px) 20%;
      font-size: var(--18px);
  }
  #taskDesc b{
      /* font-weight: normal; */
      color: black;
      animation: 3s pulse infinite;
  }
  #taskTitle{
      font-size:var(--32px);
  }
  #taskInfo div{
      display:inline-block;
  }
  #taskInfo #taskVal{
      display:block;
      font-size:var(--24px);
      margin-top:var(--12px);
  }
  
  .start #help{
      bottom:-50%;
  }
  .start #helpTop, .start #infoUI, .start #res{
      top:-50%;
  }
  
  .show_help #helpTop{
      display:block;
  }
  .dead #helpTop, #helpTop{
      display:none;
  }
  #helpTop{
      position:absolute;
      top: var(--62px);
      width:100%;
      transition: all 2s;
  }
  #helpTop>div>div{
      display:none;
  }
  #helpTop .showHelp{
      display:block;
  }
  #help{
      position:absolute;
      left:0;
      bottom:0;
      transition: all 2s;
  }
  .help{
      color:white;
      font-size: var(--18px);
      padding: var(--16px) var(--200px);
      width:100%;
      text-align:center;
      z-index: 10;
      background: #00000061;
      box-sizing: border-box;
  }
  .help{
      & div>b{
          font-weight:normal;
          & i{
              display:none;
          }
      }
  }
  #help div{
      margin:var(--8px);
  }
  .selection .selectHelp #noselect, #hasselect, #hasproducer, #hasconvert, .selection.producer #hasselect{
      display:none;
  }
  .selectHelp #noselect, .selection #hasselect, .producer #hasproducer, .convert #hasconvert{
      display:block;
  }
  body:has(.showHelp) .selectHelp{
      display:none;
  }
  #infoUI{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height: var(--62px);
      /*display:none;*/
      background: var(--ui-base);
      border-bottom: var(--2px) solid var(--ui-base-edge);
      z-index: 100;
      transition: all 2s;
      box-sizing: border-box;
      pointer-events: all;
      filter: drop-shadow(0 0 var(--6px) black);
  }
  
  #unitInfo .info{
      font-size:var(--16px);
      /* width: -webkit-fill-available; */
      text-overflow: ellipsis;
      margin-bottom: var(--12px);
  }
  #unitInfo .convert img{
      vertical-align: text-top;
  }
  #groupInfo img{
    margin: 0 var(--4px);
  }
  #groupInfo .aggr div>span{
      border:var(--2px) solid lightgray;
      padding:var(--2px) var(--6px);
      border-radius:var(--12px);
      white-space: nowrap;
  }
  #groupInfo .aggr div>span:hover, #groupInfo .aggr .all:hover + .idle{
      border-color:black;
  }
  #groupInfo .aggr .idle{
      border-left: 0;
      border-radius: 0 var(--12px) var(--12px) 0;
  }
  #groupInfo .aggr .sub.full, #unitInfo .aggr .sub.full + span{
      border-color: #6087a5;
      background:#b4deff;
  }
  #groupInfo .aggr .all{
      border-right: 0;
      border-radius: var(--12px) 0 0 var(--12px);
  }
  #groupInfo .aggr .sub, #groupInfo .aggr .act, #groupInfo .aggr .sub + span{
      border-color: #c8c855;
      background:lightyellow;
  }

  #fadeFromBlack {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      animation: fadeIn 2s forwards; /* Adjust duration as needed */
      z-index: 99999999;
      pointer-events: none;
  }
  
  @keyframes fadeIn {
      0% {
          opacity: 1;
      }
      99% {
          opacity: 0;
      }
      100% {
          opacity: 0;
          display: none;
      }
  }
  
  .fill{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
  }
  #title{
      background:url(../img/title.png);
      width: 30%;
      height: 100%;
      background-repeat:no-repeat;
      background-position:center;
      filter: drop-shadow(0 0 var(--16px) black) drop-shadow(0 0 var(--26px) black);
      image-rendering: pixelated;
      position: absolute;
      background-size: contain;
      left: 35%;
  }
  
  #menu{
      pointer-events:all;
      background:black url(../img/botuScreen256.png);
      background-size:90% 75%;
      background-repeat: repeat-x;
      z-index:2000;
      animation: slider 10s linear infinite;
      transition: all 3s;
      image-rendering: pixelated;
  }
  #menu.hide{
      top: -200%;
  }
  @keyframes slider {
      0% {
          background-position: 0% 0;
      }
      100% {
          background-position: 900% 0;
          /* display: none; */
      }
  }
  #start #dif, #start #continue{
      display:none;
  }
  #menu #start{
      position:absolute;
      width:100%;
      bottom:12.5%;
      font-size:var(--46px);
      color:white;
      transform: translate(0%, 50%);
      text-align: center;
  }
  #start .button{
      display:inline-block;
      margin: var(--46px);
      text-transform: capitalize;
  }
  #menu .button:hover{
      color:#ed0a9b;
      filter:drop-shadow(0 0 var(--6px) #ed0a9b) drop-shadow(0 0 var(--16px) #ed0a9b);
  }
  #gameOver, #gameWin{
      background-image: url(../img/gameOver.png);
      background-size: cover;
      background-position:center bottom;
      background-repeat:no-repeat;
      z-index: 20000;
      background-color: black;
      /* display:none; */
      image-rendering: pixelated;
      top:-120%;
      transition: all 4s;
  }
  #gameWin{
      background-image: url(../img/holy.png);
  }
  
  #gameOver.show, #gameWin.show{
      /* display:block; */
      top: 0; 
      transition: background-position initial;
      animation: moveUpDown 25s infinite;
  }
  /* Keyframes for the animation */
  @keyframes moveUpDown {
      0% {
          background-position: center bottom;
      }
      50% {
          background-position: center top;
      }
      100% {
          background-position: center bottom;
      }
  }
  #gameWin>div{
      position:absolute;
      bottom:0;
      background:#ffffffdd;
      padding: var(--24px);
  }
  #gwTitle{
      font-size:var(--62px);
      text-align:center;
  }
  #goTitle{
      position:absolute;
      top:70%;
      width:100%;
      color:#ffffff;
      font-size:20vmin;
      text-align:center;
      filter:drop-shadow(0 0 var(--6px) red) drop-shadow(0 0 var(--16px) red);
      display:none;
  }
  #goText{
      /* display:none; */
      white-space: pre-line;
      color:white;
      text-align:center;
      filter: drop-shadow(0 0 var(--6px) black) drop-shadow(0 0 var(--16px) #e81066);
      position:absolute;
      bottom:0;
      padding:var(--64px) 25%;
      background:linear-gradient( transparent,#51132c33,#51132c33,#0000005c);
  }
  #gwText{
      padding: var(--64px) ;
  }
  #introWrap{
      pointer-events: all;
      z-index: 1999;
  }
  #intro{
      position:absolute;
      left: 20%;
      top: 50%;
      right: 20%;
    transform: translateY(-50%);
      background:white;
      padding:var(--24px);
      border-radius: var(--12px);
      text-align:center;
      border: 2px solid black;
  }
  #intro:hover{
      outline:2px solid white;
  }
  #state{
      position:absolute;
      top: 14%;
      left: var(--6px);
      padding:var(
      --12px);
      background-color: #a86c37;
      display:none;
      z-index: 50;
      border-radius: var(
      --24px);
  }
  .local #state{
      display:block;
  }
  
  #error{
      position:absolute;
      left:50%;
      top:50%;
      background:white;
      border:var(--2px) solid black;
      border-radius:var(--16px);
      padding:var(--6px);
      z-index:1000000;
      transform:translate(-50%, -50%);
      display: none;
  }
  #error textarea{
      display:block;
      width:100%;
      height:30vh;
      position:relative;
  }
  
  #captureUp{
      pointer-events: auto;
      background-color:transparent;
      z-index: 1001;
  }
  
  #playerUI{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height: 100%;
      pointer-events: none;
      z-index: 1000;
  }
  .player #playerUI{
      display:block;
  }
  #cap_panel{
      position:absolute;
      flex-wrap: wrap;
      column-width: var(--64px);
      column-gap:0;
      max-height:var(--200px);
      top:var(--70px);
      left: var(--12px);
      z-index:100;
      pointer-events: all;
      border-radius:var(--12px);
      /* overflow: hidden; */
      filter: drop-shadow(0 0 var(--6px) black);
      
      .item{
          display:flex;
          background:white;
          padding:var(--4px);
          font-size: var(--18px);
          img{
              width:var(--16px);
              height:var(--16px);
              image-rendering:pixelated;
              margin-right:var(--2px);
          }
          div{
              height:var(--20px)
          }
      }
  }
  /*:hover::after {
        content: attr(title);
        position: absolute;
        background: #333;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        top: -30px; 
        left: 50%;
        transform: translateX(-50%);
        }*/
  #counterWrap{
      position:absolute;
      color:white;
      right:0;
      bottom:50%;
      z-index: 1000;
      display: none;
  }
  #counterWrap div{
      margin:0.5vmin;
  }
  .botuSlider{
      width: calc(8% - var(--12px));
      background: #efb62f;
      z-index: 200;
      border-radius:var(--16px);
      overflow:hidden;
      margin: var(--12px);
      padding: var(--6px);
  }
  #savegame, #infoUI .loadgame, #infoUI .exitgame{
      position:absolute;
      top: var(--8px);
      height:var(--32px);
      width:var(--32px);
      background-size:var(--32px);
      background-repeat:no-repeat;
      background-position:center;
      image-rendering:pixelated;
      padding:var(--6px);
      border-radius:var(--12px);
      
      &:hover{
          background-color:#ffffff99;
      }
  }
  #savegame{
    background-image:url(../img/menu/save.png);
    right: var(--12px);
  }
  #infoUI .loadgame{
      background-image:url(../img/menu/load.png);
      right: var(--36px);
  }
  
  #infoUI .exitgame{
    background-image:url(../img/menu/exit.png);
    right: 0;
}
  #savegame{
      right: var(--72px);
  }
#stats{
    position:absolute;
    background:white;
    font-size:var(--12px);
    top:var(--62px);
    pointer-events:all;
    z-index:1000;
    height: calc(-1*var(--70px) + -1*var(--62px) + 100vh);
    width: 50vw;
    overflow:hidden;
    

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead {
      background-color: #f0f0f0;
      position: sticky;
      top: 0;
      z-index: 1;
      display: table;
      table-layout: fixed;
      width: calc(100% - var(--scrollbar-width));
    }

    th, td {
      padding: 8px 12px;
      border: 1px solid #ddd;
      text-align: right;
      width:12.5%;
      padding: var(--2px);
      margin: 0;
      background: white;
      color: black;
    }

    th:first-child, td:first-child{
        /*background:red;*/
        width:25%;
        text-align:left;
    }

    tbody {
      display: block;
      height: calc(-1*var(--70px) + -1*var(--62px) + 100vh);
      overflow-y: scroll;
        overflow-x:hidden;
    }

    tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    th {
      cursor: pointer;
    }
    th.asc::after {
      content: " ▲";
    }
    th.desc::after {
      content: " ▼";
    }
}
  #sound{
      position:absolute;
      top: 0;
      right: 26%;
  }
  #music{
      position:absolute;
      top: 0;
      right: 18%;
  }
  #gameSpeed{
      position:absolute;
      top: 0;
      right: 10%;
      /* width: 10%; */
  }
  .botuSlider{
      box-sizing:border-box;
  }
  .botuSlider b{
      color: #000000;
      font-size: var(--20px);
      font-weight:normal;
      text-align:center;
      display:block;
  }
  .botuSlider div{
      position:absolute;
      width:100%;
      height: 100%;
      background: #efd72f;
      bottom:0;
      left: 0;
      z-index: -1;
  }
  #time{
      z-index: 100;
      position: absolute;
      top: var(--4px);
      right: 60%;
      /* transform:translateX(-50%); */
      text-align:right;
      /*line-height: var(--62px);*/
      color: white;
      padding: var(--6px) var(--6px) var(--2px);
      margin: var(--6px);
      border-radius: var(--12px);
      transition: all 2s;
  }
  .dead #time {
      right:50%;
      transform:translateX(50%);
  }
  #time:hover{
      background: #ffffff99;
  }
  .task{
      /*filter: drop-shadow(0 0 var(--2px) white) drop-shadow(0 0 var(--4px) yellow) drop-shadow(0 0 var(--8px) yellow);*/
      animation: pulse 3s infinite;
      color:black;
  }
  @keyframes pulse {
      0%, 100% {
          filter: drop-shadow(0 0 var(--2px) white) drop-shadow(0 0 var(--4px) yellow) drop-shadow(0 0 var(--8px) yellow);
      }
      50% {
          filter: drop-shadow(0 0 var(--8px) white) drop-shadow(0 0 var(--16px) white) drop-shadow(0 0 var(--32px) yellow);
      }
  }
  #nextStep{
      z-index:100;
      position:absolute;
      top: 0;
      left: 50%;
      color: black;
      background: #a4f9ff;
      display: inline-block;
      margin: var(--8px);
      padding: var(--6px) var(--16px);
      border-radius: var(--12px);
      font-size: var(--24px);
      overflow: hidden;
      /* height: var(--32px); */
      transform: translateX(-50%);
      width: 25%;
      text-align: center;
      border: var(--2px) solid black;
      box-sizing: border-box;
      transition:all 1s;
  }
  .dead #nextStep{
      top:-150%;
  }
  
  @property --bg-angle {
    inherits: false;
    initial-value: 0deg;
    syntax: "<angle>";
  }
  
  /**
   * To animate the gradient, we set the custom property to 1 full
   * rotation. The animation starts at the default value of `0deg`.
   */
  @keyframes spin {
    to {
      --bg-angle: 360deg;
    }
  }
  
  .player #nextStep:hover{
      outline: var(--2px) solid white;
  }
  #nextStepInfo{
      position:absolute;
      top: 0;
      right: 60%;
      background:black;
      color:white;
      width:20%;
      font-size:var(--16px);
      border-radius:var(--12px);
      padding:var(--12px);
  }
  
  #music:hover, #sound:hover, #gameSpeed:hover{
      outline: var(--2px) solid white;
  }
  
  #nextStep b{
      font-weight: normal;
  }
  #stepCounter{
      z-index:100;
      position:absolute;
      top: 0;
      left: 50%;
      color: black;
      /* background: white; */
      display: inline-block;
      /* margin: 1vw; */
      /* padding: 1vw; */
      /* border-radius: 1vw; */
      /* font-size: 2vw; */
      /* padding: var(--12px); */
      margin: var(--12px);
      padding: var(--12px);
      border-radius: var(--12px);
      transform: translateX(-50%);
      background:#b5f6f7;
      overflow: hidden;
  }
  .stepProgress{
      position:absolute;
      left:0;
      top:0;
      height:100%;
      background: white;
      z-index: -1;
  }
  .hue_animate{
      background-image:linear-gradient(90deg, white, transparent), conic-gradient( 
          from var(--bg-angle) at 85% 50% in oklch longer hue,
          oklch(0.85 0.37 0) 0 0
        ) !important;
      animation: spin 2.5s infinite linear !important;
  }
  #stepCounter b{
      font-weight:normal;
  }
  #selectDiv{
      position:absolute;
      right: 0;
      bottom: 0;
      z-index: 101;
      /* color:white; */
      /* font-size: 1vw; */
      padding: var(--16px);
  }
  #selectDiv span{
      display:inline;
  }
  
  .options .info{
      position:absolute;
      left: 50%;
      bottom:100%;
      z-index:100;
      background: #808080;
      color: white;
      padding: var(--6px);
      border-radius: var(--12px);
      font-size: var(--24px);
      transform: translateX(-50%);
      display:none;
  }
  .options .row:hover .info{
      display:block;
  }
  .options .toggle{
      width: var(--40px);
      height: var(--24px);
      background:lightgray;
      display:inline-block;
      border-radius:var(--12px);
      position:relative;
  }
  .options .toggle.selected{
      background:gray;
  }
  .options .toggle b{
      position:absolute;
      width: var(--24px);
      height: var(--24px);
      background:#ffffff;
      border:var(--2px) solid gray;
      display:inline-block;
      border-radius:var(--12px);
      box-sizing:border-box;
      left:0;
  }
  .options .toggle.selected b{
      left:initial;
      right:0;
      border-color:black;
  }
  .options.varia .toggle b{
      left:var(--8px);
      /*border-color:#bebebe;
      background-color:gray;*/
  }
  
  #res{
      position:absolute;
      top: 0;
      left:0;
      z-index: 10000;
      margin: var(--4px);
      transition: all 2s;
      color:white;
      font-size: var(--24px);
  }
  #res .detail_res{
      flex-wrap: wrap;
      >div{
          display: flex;
          margin:var(--6px);
      }
  }
  #res .main_res>div{
      display:inline-block;
      margin:var(--6px);
  }
  #res .res:has(.full){
      color: #ff0000 !important;
      background:black;
  }
  #res .res:hover{
      background:#ffffff2b;
  }
  #res .res:has(.full):hover{
      background:#00000099;
  }
  #res>div{
      padding: var(--6px) var(--6px) var(--4px);
      margin:var(--6px);
      position: relative;
      border-radius: var(--12px);
      display: inline-block;
  }
  #res img, .unit img, .amount img, .product img, #infoDiv img{
      width: var(--24px);
      height: var(--24px);
      image-rendering: pixelated;
  }
.res_panel{
    position:absolute;
    background:white;
    color:black;
    font-size:var(--18px);
    padding:var(--6px);
    left: 0;
    top: calc(100% + var(--18px));
    display: none;
    border-radius: var(--12px);
    overflow:hidden;
    filter: drop-shadow(0 0 var(--6px) black);
    
    div{
        white-space:nowrap;
    }

    .unit_res{
        column-width: var(--100px);
        max-height:30vh;

        div{
            margin: 0 var(--6px);
        }
    }
}

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

  .ibut img{
      width: 0;
      height: 0;
      image-rendering: pixelated;
      transition: var(--buta);
      margin: 0;
  }
  .butbar .options img{
      width: var(--24px);
      height: var(--24px);
      image-rendering: pixelated;
  }
 .butbar .toggleGroup .options img{
      width: var(--16px);
      height: var(--16px);
      image-rendering: pixelated;
    padding:var(--4px);
  }
  .ibut:hover img{
      width: var(--24px);
      height: var(--24px);
  }
  .ibut:hover .consume img{
      width: var(--16px);
      height: var(--16px);
  }
  #res img{
      margin-right:var(--4px);
      vertical-align: text-top;
  }
  .ibut:hover .row img, .ibut:hover .sum img{
      margin: 0 var(--6px);
  }
  .sel_row img{
      /* vertical-align: baseline; */
      transform: translateY(var(--2px));
  }
  #unitInfo img{
      margin: 0 var(--4px);
  }
#unitInfo .flag img, #unitInfo .pierce img, #unitInfo .status img{
    margin:0;
}
  #unitInfo .name img{
      width: var(--36px);
      height: var(--36px);
  }
  #unitInfo .convert img{
      width: var(--16px);
      height: var(--16px);
      image-rendering: pixelated;
      margin-right: var(--6px);
  }
  #unitInfo .convert{
      font-size:var(--20px);
  }
  .amount img{
      margin-right:var(--2px);
  }

#editor{
    z-index:10000;
    position:absolute;
    background: white;
    font-size: var(--12px);
}