/* Result meters share real before/after values for both gains and losses. */
.stat-change-meters { --stat-start-delay:700ms; --stat-duration:1300ms; display:grid; gap:16px; width:100%; min-width:0; }
.stat-change-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; }
.stat-change-meter { --stat-color:var(--mint); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 10px; min-width:0; }
.stat-change-meter.decreasing { --stat-color:var(--accent); }
.stat-change-heading { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stat-change-heading>span { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:15px; font-weight:700; white-space:nowrap; }
.stat-change-heading .icon { width:19px; height:19px; color:var(--stat-color); }
.stat-change-heading>strong { color:var(--stat-color); font-size:22px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-change-track { position:relative; height:10px; overflow:hidden; border-radius:999px; background:var(--line); isolation:isolate; }
.stat-change-fill,.stat-change-trail { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:var(--stat-color); }
.stat-change-fill { width:var(--stat-to); overflow:hidden; }
.stat-change-trail { left:min(var(--stat-from),var(--stat-to)); width:calc(max(var(--stat-from),var(--stat-to)) - min(var(--stat-from),var(--stat-to))); opacity:0; }
.stat-change-score { color:var(--muted); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-change-score small { font-size:10px; font-weight:400; }
.stat-change-meters:not(.is-animated) .stat-change-fill { width:var(--stat-from); }
.stat-change-meters.is-animated .stat-change-fill { animation:stat-meter-change var(--stat-duration) cubic-bezier(.2,.65,.3,1) both; animation-delay:calc(var(--stat-start-delay) + var(--stat-row-delay)); }
.stat-change-meters.is-animated .stat-change-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 15%,#ffffffa0 50%,transparent 85%); animation:stat-meter-shine var(--stat-duration) ease-in-out both; animation-delay:calc(var(--stat-start-delay) + var(--stat-row-delay)); }
.stat-change-meters.is-animated .stat-change-heading .icon { animation:stat-icon-pulse var(--stat-duration) ease-in-out both; animation-delay:calc(var(--stat-start-delay) + var(--stat-row-delay)); }
.stat-change-meters.is-animated .stat-change-heading>strong { animation:stat-delta-arrive 650ms ease-out both; animation-delay:calc(var(--stat-start-delay) + var(--stat-row-delay)); }
.stat-change-meters.is-animated .stat-change-trail { animation:stat-trail-fade calc(var(--stat-duration) + 400ms) ease-out both; animation-delay:calc(var(--stat-start-delay) + var(--stat-row-delay)); }
.encounter-result .stat-change-meters { --stat-start-delay:1000ms; }
@keyframes stat-meter-change { from { width:var(--stat-from); } to { width:var(--stat-to); } }
@keyframes stat-delta-arrive { 0% { opacity:0; transform:translateY(6px) scale(.9); } 65% { opacity:1; transform:translateY(-1px) scale(1.08); } 100% { opacity:1; transform:none; } }
@keyframes stat-trail-fade { 0%,65% { opacity:.65; } to { opacity:0; } }
@keyframes stat-meter-shine { from { opacity:0; transform:translateX(-100%); } 35% { opacity:.85; } to { opacity:0; transform:translateX(100%); } }
@keyframes stat-icon-pulse { 0%,100% { transform:scale(1); filter:none; } 40% { transform:scale(1.2); filter:drop-shadow(0 0 5px var(--stat-color)); } }
@media(max-width:600px) {
 .stat-change-meters { gap:13px; }
 .stat-change-grid { gap:13px 18px; }
 .stat-change-heading>strong { font-size:20px; }
 .stat-change-heading>span { font-size:14px; gap:6px; }
 .stat-change-heading .icon { width:17px; height:17px; }
 .stat-change-grid .stat-change-meter { gap:6px; }
}
@media(max-height:650px) {
 .stat-change-meters { gap:10px; }
 .stat-change-heading>strong { font-size:20px; }
 .stat-change-track { height:8px; }
}