/* Cade replay chart: the plot of their Wager Replay card (the one on /landing/v2/), one style for
   every page that shows a live round. Script: /lib/replay-chart.js. The host gives it a size;
   everything inside is sized off the plot's own width (container units), floored for phones. */
.crc{--ink:#0B0B0B;--cream:#EFE9D8;--lime:#91BB4F;--red:#EA2A46;--yel:#FAF424;
  position:relative;width:100%;height:100%;min-height:180px;container-type:inline-size;contain:paint;
  border:2px solid rgb(240 234 217 / .16);background:rgb(0 0 0 / .35);color:var(--cream);transition:border-color .3s}
.crc[data-tone=win]{border-color:color-mix(in srgb,var(--lime) 55%,transparent)}
.crc[data-tone=loss]{border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.crc canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.crc-marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.crc-bet,.crc-you,.crc-head{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.crc-bet{width:var(--s,9px);height:var(--s,9px);background:color-mix(in srgb,var(--lime) 80%,transparent);border:1.5px solid var(--ink);opacity:.85}
.crc-bet[data-side=lower]{background:color-mix(in srgb,var(--red) 80%,transparent)}
.crc-you{z-index:3;width:15px;height:15px;background:var(--yel);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.crc-head{z-index:3;width:12px;height:12px;background:var(--cream);border:2px solid var(--ink)}
.crc-head::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--cream);animation:crchalo 1.1s ease-out infinite}
.crc-head[data-final=true]{width:15px;height:15px}.crc-head[data-final=true]::after{content:none}
.crc-bet[data-fresh=true]{animation:crcpop .42s cubic-bezier(.16,1,.3,1)}
.crc-you[data-fresh=true]{animation:crcslam .52s cubic-bezier(.16,1,.3,1)}
@keyframes crchalo{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes crcpop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes crcslam{0%{transform:translate(-50%,-50%) scale(2.8);opacity:0}55%{transform:translate(-50%,-50%) scale(.9);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.crc-lbl{position:absolute;z-index:4;margin:0;font-family:var(--data,"JetBrains Mono",monospace);font-weight:700;font-size:clamp(11px,2.2cqw,13px);letter-spacing:.1em;
  padding:.25em .6em;background:var(--ink);color:var(--cream);white-space:nowrap;font-variant-numeric:tabular-nums}
.crc-line{left:10px;bottom:10px;color:var(--yel)}
.crc-pick{background:var(--yel);color:var(--ink)}
.crc-final{right:10px;white-space:pre;text-align:right;line-height:1.35}
.crc-final[data-corner=bottom]{bottom:10px}.crc-final[data-corner=top]{top:10px}
.crc-final[data-out=higher]{color:var(--lime)}.crc-final[data-out=lower]{color:var(--red)}
.crc-clock{position:absolute;z-index:4;top:10px;left:12px;margin:0;font-family:var(--data,"JetBrains Mono",monospace);font-weight:700;font-size:clamp(12px,2.8cqw,16px);
  letter-spacing:.08em;color:var(--yel);font-variant-numeric:tabular-nums}
.crc-clock[data-shut=true]{color:var(--cream);opacity:.7}
.crc-flash{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--lime);opacity:0}
.crc-flash[data-tone=loss]{background:var(--red)}
.crc-flash.on{animation:crcflash .52s ease-out forwards}
@keyframes crcflash{0%{opacity:.35}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.crc-head::after,.crc-bet,.crc-you,.crc-flash.on{animation:none!important}}
html.static .crc-head::after{animation:none}
/* the live price at the tip and the move against the line (o.price) */
.crc-px{transform:translateY(-50%);z-index:5;font-size:clamp(12px,2.6cqw,15px);box-shadow:3px 3px 0 #000;border:1.5px solid currentColor}
.crc-px[data-side=up]{color:var(--lime)}.crc-px[data-side=down]{color:var(--red)}
.crc-vs{top:10px;right:10px;background:none;padding:0;font-size:clamp(11px,2.2cqw,13px)}
.crc-vs[data-side=up]{color:var(--lime)}.crc-vs[data-side=down]{color:var(--red)}