/* Result surfaces: result color belongs to the card surface, fading behind the data. */
.historycard.historywin,.historycard.historyloss{
  --result-color:var(--tempo-success);
  --result-fill:var(--tempo-success-fill,#087f5b);
  border:1px solid var(--tempo-line);
  background-color:var(--tempo-panel);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--result-fill) 50%,transparent) 0%,color-mix(in srgb,var(--result-fill) 25%,transparent) 33%,color-mix(in srgb,var(--result-fill) 7%,transparent) 62%,transparent 94%);
}
.historycard.historyloss{--result-color:var(--tempo-danger);--result-fill:var(--tempo-danger-fill,#a52b40)}
.historycard.historywin:hover,.historycard.historyloss:hover{background-color:var(--tempo-panel2)}
.historycard.historywin .historycontext,.historycard.historyloss .historycontext{background:transparent;border-bottom-color:var(--tempo-line)}
.historycard.historywin .historyportrait>img,.historycard.historyloss .historyportrait>img{
  border:1px solid var(--result-color);
  outline:1px solid var(--result-color);
  outline-offset:0;
  box-shadow:none;
}
.historycard .historyfooter{background:transparent}