.ox-cf-stage { perspective: 800px; display: grid; place-items: center; height: 200px; margin: 6px 0; }
.ox-cf-stage.is-flipping { animation: ox-cf-hop 1.6s ease-out; }
@keyframes ox-cf-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-46px); } 100% { transform: translateY(0); } }
.ox-cf-coin { position: relative; width: 150px; height: 150px; transform-style: preserve-3d; cursor: pointer; }
.ox-cf-side { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; backface-visibility: hidden;
  border: 8px solid #b7791f; box-shadow: inset 0 0 0 4px #f6d365, inset 0 -10px 24px rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.25); background: radial-gradient(circle at 30% 25%, #fff3b0, #f6c343 55%, #d69e2e); color: #7b4a06; }
.ox-cf-side span { font: 900 3.6rem var(--font-round); line-height: 1; }
.ox-cf-side small { font: 800 .85rem var(--font-round); letter-spacing: .12em; text-transform: uppercase; }
.ox-cf-t { transform: rotateY(180deg); }
.ox-cf-res { text-align: center; min-height: 1.2em; }
.ox-cf-center { text-align: center; }