/* Health/disease info tooltip for player cards */
.fact-value-with-info{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  max-width:100%;
  vertical-align:middle;
}
.fact-main-value{min-width:0; overflow-wrap:anywhere;}
.fact-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25rem;
  height:1.25rem;
  flex:0 0 1.25rem;
  border-radius:999px;
  border:1px solid rgba(120,170,255,.45);
  background:rgba(62,123,255,.16);
  color:#cfe0ff;
  font-weight:900;
  font-size:.78rem;
  line-height:1;
  cursor:help;
  outline:none;
}
.fact-info:hover,
.fact-info:focus{
  background:rgba(62,123,255,.28);
  border-color:rgba(160,195,255,.8);
  color:#fff;
}
.fact-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + .65rem);
  transform:translateX(-50%) translateY(4px);
  z-index:1000;
  width:min(320px, calc(100vw - 32px));
  padding:.85rem .95rem;
  border-radius:16px;
  border:1px solid rgba(135,170,220,.34);
  background:linear-gradient(180deg, rgba(22,32,48,.98), rgba(9,14,24,.98));
  color:#eaf1ff;
  box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
  text-align:left;
  font-size:.92rem;
  line-height:1.35;
  white-space:normal;
}
.fact-tooltip:after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:.42rem solid transparent;
  border-top-color:rgba(9,14,24,.98);
}
.fact-info:hover .fact-tooltip,
.fact-info:focus .fact-tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.fact-tooltip-title{
  display:block;
  font-weight:900;
  margin-bottom:.35rem;
  color:#fff;
}
.fact-tooltip-row{
  display:block;
  color:#cbd6e8;
  font-weight:600;
}
.fact-tooltip-row + .fact-tooltip-row{margin-top:.35rem;}
.fact-tooltip-row b{color:#fff;}
@media (max-width: 720px){
  .fact-tooltip{
    position:fixed;
    left:50%;
    bottom:1.1rem;
    top:auto;
    width:calc(100vw - 28px);
    max-width:420px;
    transform:translateX(-50%) translateY(8px);
  }
  .fact-tooltip:after{display:none;}
  .fact-info:hover .fact-tooltip,
  .fact-info:focus .fact-tooltip{
    transform:translateX(-50%) translateY(0);
  }
}