/* Stat tips (js/stattips.js): the panel beside the side panel when you point at a stat. */
#stattips {
  position: fixed;
  z-index: 60;
  display: none;
  width: 360px;
  background: rgba(21, 20, 27, .97);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
#stattips > div { margin: 0 0 4px; }
#stattips .stattips-h { font-size: 14px; color: var(--gold); }
#stattips .stattips-h .dim { font-size: 12px; }
#stattips .stattips-x { margin-top: 6px; }
#stattips .stattips-n { font-size: 11px; margin-top: 4px; }
#stattips .up { color: #7fd17f; }
#stattips .down { color: #e08a7a; }
.stattips-t { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
.stattips-t th { text-align: right; font-weight: normal; color: var(--dim); font-size: 11px; padding: 0 0 2px 8px; }
.stattips-t th:first-child, .stattips-t td:first-child { text-align: left; padding-left: 0; }
.stattips-t td { text-align: right; padding: 1px 0 1px 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.stattips-t tr.here td { color: #f3e7c4; font-weight: bold; }
[data-tip] { cursor: help; }