.cf-stage{position:relative;height:250px;display:grid;place-items:end center;padding-bottom:34px;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;
  border-radius:var(--radius);background:radial-gradient(ellipse at 50% 100%,var(--brand-soft) 0%,transparent 70%)}
.cf-stage:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.cf-shadow{position:absolute;left:50%;bottom:22px;width:130px;height:18px;margin-left:-65px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(4px)}
.cf-shadow.up{animation:cf-shadow 1.3s ease-in-out}
@keyframes cf-shadow{50%{transform:scale(.45);opacity:.35}}
.cf-toss{transform-style:preserve-3d}
.cf-toss.up{animation:cf-toss 1.3s cubic-bezier(.3,0,.4,1)}
@keyframes cf-toss{0%{transform:translateY(0)}45%{transform:translateY(-120px) scale(1.12)}80%{transform:translateY(0)}88%{transform:translateY(-14px)}100%{transform:translateY(0)}}
.cf-coin{width:170px;height:170px;position:relative;transform-style:preserve-3d}
.cf-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf-heads{background:radial-gradient(circle at 32% 28%,#fff6c8 0%,#f7d154 30%,#e0a526 65%,#b97a12 100%);box-shadow:inset 0 0 0 7px #c98b1a,inset 0 0 0 9px #f7da7a,0 8px 18px rgba(120,80,0,.35)}
.cf-tails{transform:rotateX(180deg);background:radial-gradient(circle at 32% 28%,#ffffff 0%,#dfe4ea 32%,#aab3be 70%,#7e8896 100%);box-shadow:inset 0 0 0 7px #8f99a6,inset 0 0 0 9px #e9edf1,0 8px 18px rgba(40,50,70,.35)}
.cf-ring{position:absolute;inset:20px;border-radius:50%;border:2px dashed rgba(0,0,0,.18)}
.cf-face b{position:relative;font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1;max-width:120px;text-align:center;word-break:keep-all;overflow-wrap:normal}
.cf-heads b{color:#8a5a00;text-shadow:0 1px 0 #fff3b0,0 -1px 0 rgba(0,0,0,.25)}
.cf-tails b{color:#4b5563;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.25)}
.cf-face b.long{font-size:30px}
.cf-res-H{color:#c58a0a!important}
.cf-res-T{color:#64748b!important}
.cf-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cf-side{border-radius:var(--radius-sm);padding:12px 14px;text-align:center}
.cf-side.h{background:linear-gradient(135deg,#fff7d6,#fde68a)}
.cf-side.t{background:linear-gradient(135deg,#f1f5f9,#cbd5e1)}
.cf-side b{display:block;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;color:#3b2f0b}
.cf-side.t b{color:#1f2937}
.cf-side span{font-size:13px;color:#57534e}
.cf-side em{font-style:normal;font-weight:700}
.cf-bar{height:12px;border-radius:99px;background:linear-gradient(90deg,#cbd5e1,#94a3b8);overflow:hidden}
.cf-bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:99px 0 0 99px;transition:width .4s ease}
.cf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.cf-stats .stat{padding:10px 12px}
.cf-seq{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cf-seq i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.cf-seq i.h{background:radial-gradient(circle at 35% 30%,#fff2b3,#f2c230 60%,#c98b1a);color:#6b4500}
.cf-seq i.t{background:radial-gradient(circle at 35% 30%,#fff,#cfd5dd 60%,#8f99a6);color:#374151}
.cf-seq i.new{animation:cf-pop .35s ease-out}
@keyframes cf-pop{from{transform:scale(0)}}
@media (max-width:400px){.cf-coin{width:150px;height:150px}.cf-stats .stat b{font-size:19px}}
@media (prefers-reduced-motion:reduce){.cf-toss.up,.cf-shadow.up,.cf-seq i.new{animation:none}.cf-coin{transition:none!important}}