/* The check card above a rolled turn's narration (src/ui/check-card.mjs). */
.check-card{margin:0 0 12px;padding:9px 12px;border:1px solid var(--stone-850);border-radius:var(--radius-md);background:var(--surface-low);font:400 var(--size-ui)/1.45 var(--head);color:var(--text-soft)}
.check-card .check-head{color:var(--text-dim);font-size:var(--size-small)}
.check-card .check-outcome{font-weight:600;font-size:var(--size-body)}
.check-card .check-outcome.good{color:var(--ok)}
.check-card .check-outcome.mixed{color:var(--warn)}
.check-card .check-outcome.bad{color:var(--danger)}
.check-card .check-parts{color:var(--text-dim);font-size:var(--size-small)}
.check-card .check-strikes{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--stone-850);font-size:var(--size-small)}
.check-card .check-strikes .landed{color:var(--danger)}
.check-card .check-strikes .missed,.check-card .check-strikes .stopped{color:var(--text-dim)}
.check-card .check-xp{margin-left:6px;color:var(--accent);font-weight:500;font-size:var(--size-small)}
.check-card .check-cost{margin-left:6px;color:var(--text-dim);font-weight:400;font-size:var(--size-small)}
.check-card .check-gain{margin-left:6px;color:var(--accent);font-weight:500;font-size:var(--size-small)}
.check-card .check-rise{color:var(--accent);font-weight:500;font-size:var(--size-small)}
.check-card .check-strikes .dealt{color:var(--ok)}
/* The outcome as it first shows, on a reel: the outcomes go round twice, slow
   past the one rolled and settle back onto it; what the roll did shows once
   it has landed. */
.check-card{--reel-line:1.45em;--reel-time:1.7s}
.check-reel{display:inline-block;height:var(--reel-line);overflow:hidden;vertical-align:top;animation:check-reel-window var(--reel-time)}
.check-reel-strip{display:block;transform:translateY(calc(var(--stops) * -1 * var(--reel-line)));animation:check-reel-spin var(--reel-time) backwards,check-reel-blur var(--reel-time) backwards}
.check-reel-strip>span{display:block;height:var(--reel-line);line-height:var(--reel-line);white-space:nowrap}
.check-reel-strip>.good{color:var(--ok)}
.check-reel-strip>.mixed{color:var(--warn)}
.check-reel-strip>.bad{color:var(--danger)}
.check-card.spinning .check-outcome{animation:check-landed .8s ease-out var(--reel-time)}
.check-card.spinning :is(.check-xp,.check-cost,.check-gain,.check-parts,.check-rise,.check-strikes){animation:check-after-reel .35s ease-out var(--reel-time) backwards}
@keyframes check-reel-spin{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,.75,.7,1)}85%{transform:translateY(calc((var(--stops) + .25) * -1 * var(--reel-line)));animation-timing-function:cubic-bezier(.3,0,.3,1)}to{transform:translateY(calc(var(--stops) * -1 * var(--reel-line)))}}
@keyframes check-reel-blur{0%,35%{filter:blur(.8px)}60%,to{filter:none}}
/* Words fade at the window's edges while it turns; the landed one is clear. */
@keyframes check-reel-window{0%,96%{-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}}
@keyframes check-landed{0%{text-shadow:0 0 12px currentColor}to{text-shadow:0 0 0 transparent}}
@keyframes check-after-reel{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.check-reel,.check-reel-strip,.check-card.spinning .check-outcome,.check-card.spinning :is(.check-xp,.check-cost,.check-gain,.check-parts,.check-rise,.check-strikes){animation:none}}
.downed-bar{border-color:var(--danger-700)}
.downed-bar p{color:var(--danger-300)}