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

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('war-bg.png') no-repeat center center;
  background-size: cover;
}

#map-container {
  position: absolute;
  /* Here we assume you want the map container to have 80vh height and be centered vertically
     with some calculated top and bottom offsets. Adjust as needed. */
  top: calc(100vh - 85vh );
  bottom: 0;
  width: calc(85vh * 0.6); /* Uses the PHP variable for width */
  border: 00vh solid #333;
}
#middle-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(85vh * 0.6); /* Uses the PHP variable for width */
  border: 00.1vh solid #333;
  background: url('war-bg.png') no-repeat center center;
  opacity: 0.75;
  background-size: cover;
  background-color: #ff0000;
  box-shadow: 0 0 2vh 0.5vh #ffffff60;
}

#bg-button-container {
  position: absolute;
  top: calc(100vh - 85vh - 4vh);;
  left: 50%;
  transform: translateX(-50%);
  width: calc(85vh * 0.6); /* Same as map-container */
  height: 4vh;
  border: 0.1vh solid #333;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.attack_active {
    background: linear-gradient(
      to bottom,
      hsl(210, 33%, 70%) 0%,
      hsl(210, 33%, 65%) 46%,
      hsl(210, 33%, 55%) 54%,
      hsl(210, 33%, 40%) 100%
    ) !important;
    color: #000;
  color: black;
}

.defense_active {
    background: linear-gradient(
      to bottom,
      hsl(0, 33%, 70%) 0%,
      hsl(0, 33%, 65%) 46%,
      hsl(0, 33%, 55%) 54%,
      hsl(0, 33%, 40%) 100%
    ) !important;
    color: #000;
  color: black;
}


.node {
  position: absolute;
  width: calc(85vh / 15 * 0.8) !important;
  height: calc(85vh / 15 * 0.8) !important;
  line-height: calc(85vh / 15 * 0.8) !important;
  color: black; /* Black font for cycle state */
  border-radius: 20%;
  text-align: center;
  font-weight: bold;
  font-size: calc(85vh / 15 * 0.7);
  cursor: pointer;
  user-select: none;
  border: 0.1vh solid white;
}

.target {
  position: absolute;
  width: calc(85vh / 15 * 0.2) !important;
  height: calc(85vh / 15 * 0.2) !important;
  line-height: calc(85vh / 15 * 0.2) !important;
  background-color: gray;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  color: white;
}
#map-color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so clicks pass through */
  background-color: #ff000000;
  z-index: 5;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so clicks pass through */
 }
#totals-container {
  position: absolute;
  height: 15vh;
  width: calc(85vh * 0.6); /* same as map-container */
  top: 0;
  border: 0.0vh solid #333;
  background-color: #00000000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.totals-column {
  width: 50%;            /* two columns, each half the container */
  display: flex;
  flex-direction: column;
}

.total-row {
  height: 2.5vh;
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(to bottom, #d8d8d8 0%, #c0c0c0 46%, #bbb 54%, #989898 100%);
  align-items: center;
  border: 0.05vh solid #505050;
  justify-content: center;
  font-family: sans-serif;
  font-size: 2.0vh;
  line-height: 2.5vh;
}
.info-row {
  height: 2.5vh;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #00000000;
  background:none;
  color: yellow;
  font-style: italic;
  align-items: center;
  border: 0.00vh solid #505050;
  justify-content: center;
  font-family: sans-serif;
  font-size: 1.7vh;
  line-height: 2.5vh;
}

.total-label {
  width: 60%;
  background-color: #202020;
  border: 0px solid #505050;
  color: hsl(210 90% 60%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: 1.6vh;
}

.total-value {
  width: 30%;
  background-color: #303030;
  border: 0px solid #505050;
  border-bottom: 0.05vh solid #505050;
  border-top: 0.05vh solid #505050;
  height: 100%;
  display: flex;
  align-items: center;
  COLOR: WHITE;
  justify-content: center;
  font-family: sans-serif;
  font-size: 1.8vh;
}
#map-container img#trumpoot {
  position: absolute;
  bottom: 1vh;
  right: 1vh;
  height: 6vh;
  width: auto;
}
#map-controls {
  position: absolute;
  top: 1vh;
  left: 1vh;
  display: flex;
  flex-direction: column;
  gap: 1vh; /* gap between buttons */
}
#map-controls-rt {
  position: absolute;
  top: 1vh;
  right: 1vh;
  display: flex;
  flex-direction: column;
  gap: 1vh; /* gap between buttons */
}

#map-controls button,#map-controls-rt button {
  width: 13vh;
  height: 7.5vh;
  line-height: 2.5vh;
  font-size: 2.1vh;
  margin:0;
  padding:0;
  cursor: pointer;
  border-radius: 1.0vh;
  background: linear-gradient(to bottom, #fff 0%, #c8c8c8 46%, #a8a8a8 54%, #888 100%);
  border: 0.05vh solid #333;
  box-shadow: 0 0 0.45vh 0.45vh #ffffff30;
  color: black;
}
#map-controls-rt button {
  height: 7.5vh;


}


.header-row {
  flex-basis: 100%;
  text-align: center;
  font-size: 2.1VH;
  line-height: 2.5vh;
  font-weight: bold;
  padding: 0.02vh;
    background: linear-gradient(
      to bottom,
      hsl(120, 33%, 70%) 0%,
      hsl(120, 33%, 65%) 46%,
      hsl(120, 33%, 55%) 54%,
      hsl(120, 33%, 40%) 100%
    ) !important;
    color: #000;
}
.bgstyle{
  font-size: 4.1VH;
  line-height: 4.1vh;    
}
#undo-button,#statistics-button{
  font-size: 3.5vh !important;
  font-weight: bold;
}
.disabled{
    color: #606060 !important;
}

#overlay-content {
position: absolute;
    z-index: 999;
  background: white;
  color: black;
  padding: 0;
  border-radius: 0;
  text-align: center;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  display: none;
}