.coin-flip-stage{--coin-size:clamp(176px, 36vw, 216px);--coin-depth:12px;border-radius:var(--ui-radius-panel);cursor:pointer;perspective:1000px;-webkit-tap-highlight-color:transparent;background:radial-gradient(at 50% 65%,#e8ba5317,#0000 62%);border:0;place-items:end center;width:100%;height:328px;padding:0 0 40px;display:grid;position:relative}.coin-flip-stage:focus-visible{outline:3px solid var(--ui-focus);outline-offset:4px}.coin-flip-stage:disabled{cursor:wait}.coin-flip-lift,.coin-flip-pose,.coin-flip-coin{width:var(--coin-size);height:var(--coin-size);transform-style:preserve-3d;display:block}.coin-flip-lift{position:relative}.coin-flip-pose{transition:transform .35s;transform:rotateX(-14deg)rotateY(-24deg)rotate(-9deg)}@media (hover:hover) and (prefers-reduced-motion:no-preference){.coin-flip-stage:not(:disabled):hover .coin-flip-pose{transform:rotateX(-9deg)rotateY(-16deg)rotate(-5deg)translateY(-4px)}}.coin-flip-coin{transform:rotateX(var(--coin-to));position:relative}.coin-flip-edge{width:calc(var(--coin-size) * .02619 + .35px);height:var(--coin-depth);transform:translate(-50%, -50%) rotateZ(var(--edge-angle)) translateY(calc(var(--coin-size) * -.5 + .6px)) rotateX(90deg);background:linear-gradient(90deg, #4a2b0999, transparent 22%, #ffeaa5bf 35%, transparent 58%, #4a2b0973 95%), hsl(39 63% var(--edge-light));-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:50%;left:50%;box-shadow:inset 0 1px #ffe69ecc,inset 0 -1px #6b410ea6}.coin-flip-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(calc(var(--coin-depth) / 2));background:#cea14c;border-radius:50%;display:block;position:absolute;inset:0}.coin-flip-face svg{border-radius:50%;width:100%;height:100%;display:block}.coin-flip-tails{transform:rotateX(180deg) translateZ(calc(var(--coin-depth) / 2))}.coin-flip-face:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#0000 18%,#fff8d645 30%,#0000 44%,#683a0914 62%,#fff1b738 78%,#0000 90%);position:absolute;inset:0;box-shadow:inset 1px 1px 1px #fff4bed9,inset -1px -1px 1px #6c4211b3}.coin-flip-shadow{width:calc(var(--coin-size) * .86);filter:blur(4px);background:radial-gradient(#4f341047,#4f341017 48%,#0000 72%);border-radius:50%;height:20px;position:absolute;bottom:17px;transform:rotate(-5deg)}.dark .coin-flip-stage{background:radial-gradient(at 50% 65%,#e8ba5312,#0000 65%)}.dark .coin-flip-shadow{background:radial-gradient(#0009,#0000 72%)}.coin-flip-lift.is-flipping{animation:coin-toss var(--coin-duration) ease-in-out}.coin-flip-coin.is-flipping{animation:coin-spin var(--coin-duration) cubic-bezier(.16, .45, .35, 1) forwards}.coin-flip-shadow.is-flipping{animation:coin-shadow var(--coin-duration) ease-in-out}.coin-flip-coin.is-flipping .coin-flip-face:after{animation:coin-reflection var(--coin-duration) ease-in-out}@keyframes coin-spin{0%{transform:rotateX(var(--coin-from))}to{transform:rotateX(var(--coin-to))}}@keyframes coin-toss{0%,to{transform:translateY(0)rotate(0)}40%{transform:translateY(-68px)rotate(-12deg)}76%{transform:translateY(2px)rotate(4deg)}88%{transform:translateY(-13px)rotate(-2deg)}}@keyframes coin-shadow{0%,to{opacity:1;transform:scale(1)rotate(-5deg)}40%{opacity:.35;transform:scale(.65)rotate(-5deg)}76%{opacity:1;transform:scale(1.08)rotate(-5deg)}88%{opacity:.7;transform:scale(.9)rotate(-5deg)}}@keyframes coin-reflection{0%,to{opacity:1}25%,65%{opacity:.25}45%,85%{opacity:.85}}@media (prefers-reduced-motion:reduce){.coin-flip-pose{transition:none}.coin-flip-lift.is-flipping,.coin-flip-coin.is-flipping,.coin-flip-shadow.is-flipping,.coin-flip-coin.is-flipping .coin-flip-face:after{animation:none}}