/* Result and change states share a deep fill family; text stays readable. */
:root{--tempo-success-fill:#087f5b;--tempo-danger-fill:#a52b40;--tempo-state-start:50%;--tempo-state-mid:25%;--tempo-state-tail:7%;--tempo-state-soft:18%}
html[data-appearance=obsidian-mint]{--tempo-success-fill:#087d5b;--tempo-danger-fill:#a22b43}
html[data-appearance=hextech-blue]{--tempo-success-fill:#0b8267;--tempo-danger-fill:#a32e50}
html[data-appearance=silver-paper]{--tempo-success-fill:#087b52;--tempo-danger-fill:#a92840;--tempo-state-start:21%;--tempo-state-mid:10%;--tempo-state-tail:3%;--tempo-state-soft:9%}
.historycard.historywin,.historycard.historyloss{
 --result-fill:var(--tempo-success-fill);
 background-image:linear-gradient(90deg,color-mix(in srgb,var(--result-fill) var(--tempo-state-start),transparent) 0%,color-mix(in srgb,var(--result-fill) var(--tempo-state-mid),transparent) 33%,color-mix(in srgb,var(--result-fill) var(--tempo-state-tail),transparent) 62%,transparent 94%);
}
.historycard.historyloss{--result-fill:var(--tempo-danger-fill)}
.releasedonut{background:conic-gradient(var(--tempo-success-fill) var(--win),var(--tempo-danger-fill) 0)}
.analysisribbon i{background:var(--tempo-success-fill);border-top:1px solid var(--tempo-success)}
.analysisribbon i.lost{background:var(--tempo-danger-fill);border-top-color:var(--tempo-danger)}
.insightwintrack i{background:var(--tempo-success-fill)}
.insightwintrack{background:var(--tempo-danger-fill)}
.patchbuff{border-left-color:var(--tempo-success-fill)}
.patchnerf{border-left-color:var(--tempo-danger-fill)}
.patchbufftext{color:var(--tempo-success)}.patchnerftext{color:var(--tempo-danger)}