/* Base container */
[data-tooltip-top] {
  position: absolute;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-top]::after {
  content: attr(data-tooltip-top);
  position: absolute;
  z-index: 9999;

  /* TOP */
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  display: block;
  width: max-content;
  max-width: min(230px, 60vw);

  padding: 10px 12px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Tooltip arrow */
[data-tooltip-top]::before {
  content: "";
  position: absolute;

  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);

  border: 6px solid transparent;
  border-top-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-top]:hover::after,
[data-tooltip-top]:hover::before,
[data-tooltip-top]:focus-visible::after,
[data-tooltip-top]:focus-visible::before {
  opacity: 1;
}



/* Base tooltip container */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 9999;

  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  display: block;
  width: max-content;
  max-width: min(230px, 60vw);

  padding: 10px 12px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Tooltip arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);

  border: 6px solid transparent;
  border-top-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
}



/* Base container */
[data-tooltip-br] {
  position: absolute;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-br]::after {
  content: attr(data-tooltip-br);
  position: absolute;
  z-index: 9999;

  /* ALWAYS bottom-right */
  top: calc(100% + 10px);
  left: calc(100% + 10px);

  display: block;
  width: max-content;
  max-width: min(230px, 60vw);

  padding: 10px 12px;

  /* Fallout look (same as main tooltip) */
  background: #0b1f12;
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Tooltip arrow (points top-left) */
[data-tooltip-br]::before {
  content: "";
  position: absolute;

  top: calc(100% + 2px);
  left: calc(100% + 2px);

  border: 6px solid transparent;
  border-right-color: #111;
  border-bottom-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-br]:hover::after,
[data-tooltip-br]:hover::before,
[data-tooltip-br]:focus-visible::after,
[data-tooltip-br]:focus-visible::before {
  opacity: 1;
}




/* Base container */
[data-tooltip-center] {
  position: absolute;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-center]::after {
  content: attr(data-tooltip-center);
  position: absolute;
  z-index: 9999;

  /* CENTER OVER ELEMENT */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: block;
  width: max-content;
  max-width: min(230px, 80%);

  padding: 12px 14px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 14px rgba(60, 255, 122, 0.45);
    
  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;

}

/* Optional: dim the element underneath */
[data-tooltip-center]:hover {
  filter: brightness(0.7);
}

/* Show tooltip */
[data-tooltip-center]:hover::after,
[data-tooltip-center]:focus-visible::after {
  opacity: 1;
}


/* Base container */
[data-tooltip-tl] {
  position: absolute;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-tl]::after {
    content: attr(data-tooltip-tl);
    position: absolute;
    /* z-index: 2400000000; */
    bottom: calc(100% + 0px);
    right: calc(100% + -20px);
    display: block;
    width: max-content;
    max-width: min(230px, 60vw);
    padding: 10px 12px;
    background: #0b1f12;
    color: #7CFF9E;
    font-family: "VT323", monospace;
    z-index: 2147483647;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    border: 2px solid #3CFF7A;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #0b1f12 inset, 0 0 12px rgba(60, 255, 122, 0.4);
    text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Tooltip arrow (points bottom-right) */
[data-tooltip-tl]::before {
  content: "";
  position: absolute;

  bottom: calc(100% + 2px);
  right: calc(100% + 2px);

  border: 6px solid transparent;
  border-left-color: #111;
  border-top-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-tl]:hover::after,
[data-tooltip-tl]:hover::before,
[data-tooltip-tl]:focus-visible::after,
[data-tooltip-tl]:focus-visible::before {
  opacity: 1;
}





/* Base container */
[data-tooltip-left] {
  position: relative;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-left]::after {
  content: attr(data-tooltip-left);
  position: absolute;
  z-index: 9999;

  /* ALWAYS LEFT, vertically centered */
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);

  display: block;
  width: max-content;
  max-width: min(230px, 60vw);

  padding: 10px 12px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Tooltip arrow (points right) */
[data-tooltip-left]::before {
  content: "";
  position: absolute;

  top: 50%;
  right: calc(100% + 2px);
  transform: translateY(-50%);

  border: 6px solid transparent;
  border-left-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-left]:hover::after,
[data-tooltip-left]:hover::before,
[data-tooltip-left]:focus-visible::after,
[data-tooltip-left]:focus-visible::before {
  opacity: 1;
}


/* Tooltip arrow (points top-right) */
[data-tooltip-bl]::before {
  content: "";
  position: absolute;

  top: calc(100% + 2px);
  right: calc(100% + 2px);

  border: 6px solid transparent;
  border-left-color: #111;
  border-bottom-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-bl]:hover::after,
[data-tooltip-bl]:hover::before,
[data-tooltip-bl]:focus-visible::after,
[data-tooltip-bl]:focus-visible::before {
  opacity: 1;
}


/* Base container */
[data-tooltip-bl] {
  position: absolute;
  cursor: help;
}

/* Tooltip body */
[data-tooltip-bl]::after {
  content: attr(data-tooltip-bl);
  position: absolute;
  z-index: 9999;

  /* ALWAYS bottom-left */
  top: calc(100% + 10px);
  right: calc(100% + 10px);

  display: block;
  width: max-content;
  max-width: min(230px, 60vw);

  padding: 10px 12px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}









/* Tooltip arrow (points top-right) */
[data-tooltip-blr]::before {
  content: "";
  position: absolute;

  top: calc(100% + 2px);
  right: calc(100% + 2px);

  border: 6px solid transparent;
  border-left-color: #111;
  border-bottom-color: #111;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show tooltip */
[data-tooltip-blr]:hover::after,
[data-tooltip-blr]:hover::before,
[data-tooltip-blr]:focus-visible::after,
[data-tooltip-blr]:focus-visible::before {
  opacity: 1;
}


/* Base container */
[data-tooltip-blr] {
  cursor: help;
}

/* Tooltip body */
[data-tooltip-blr]::after {
  content: attr(data-tooltip-blr);
  position: absolute;
  z-index: 9999;

  /* ALWAYS bottom-left */
  top: calc(100% + 10px);
  right: calc(-7vh);

  display: block;
  width: max-content;
  max-width: min(230px, 40vw);

  padding: 10px 12px;

  /* Fallout look */
  background: rgba(11, 31, 18, 0.95);
  color: #7CFF9E;
  font-family: "VT323", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  border: 2px solid #3CFF7A;
  border-radius: 4px;

  box-shadow:
    0 0 0 2px #0b1f12 inset,
    0 0 12px rgba(60, 255, 122, 0.4);

  text-shadow: 0 0 4px rgba(124, 255, 158, 0.6);

  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}




.vitamin-tooltip{
    width: 23.6vh;
    height: 2.4vh;
    margin-top: -5.9vh;
    margin-left: 79vh;
    position: fixed;
}

.rad-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 4.5vh;
    margin-left: 1vh;
    position: fixed;
}
.tox-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 4.5vh;
margin-left: 4.5vh;
    position: fixed;
}

.temp-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 4.5vh;
    margin-left: 8vh;
    position: fixed;
}


.tok-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 8.5vh;
    margin-left: 8vh;
    position: fixed;
}
.gravity-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 8.5vh;
margin-left: 4.5vh;
    position: fixed;
}

.oxygen-tooltip {
width: 3.6vh;
    height: 4.5vh;
    margin-top: 8.5vh;
    margin-left: 1vh;
    position: fixed;
}



.paralysis-tooltip {
width: 3.6vh;
    height: 4.5vh;
margin-top: 12.5vh;
    margin-left: 1vh;
    position: fixed;
}
.control-tooltip {
width: 3.6vh;
    height: 4.5vh;
margin-top: 12.5vh;
margin-left: 4.5vh;
    position: fixed;
}

.hazard-tooltip {
    width: 3.6vh;
    height: 4.5vh;
margin-top: 12.5vh;
    margin-left: 8vh;
    position: fixed;
}




.mate-tooltip {
width: 3.6vh;
    height: 4.5vh;
margin-top: 16.5vh;
margin-left: 4.5vh;
    position: fixed;
}
.safe-tooltip {
width: 3.6vh;
    height: 4.5vh;
margin-top: 16.5vh;
    margin-left: 1vh;
    position: fixed;
}

.boost-tooltip {
    width: 3.6vh;
    height: 4.5vh;
margin-top: 16.5vh;
    margin-left: 8vh;
    position: fixed;
}