.flip { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; }
.coin-wrap { perspective: 60rem; padding-block: var(--sp-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.coin { width: 10rem; height: 10rem; position: relative; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.coin-wrap.is-tossing { animation: toss 1.1s cubic-bezier(.3, .6, .4, 1); }
@keyframes toss { 45% { transform: translateY(-2.5rem) scale(1.06); } }
.face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; padding: var(--sp-5); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 600; font-size: var(--fs-xl); line-height: 1.1; overflow-wrap: anywhere; box-shadow: inset 0 0 0 .5rem rgb(255 255 255 / .14), inset 0 0 0 .5625rem rgb(0 0 0 / .12), 0 14px 30px -18px rgb(26 25 21 / .6); }
.heads { background: var(--accent); color: var(--bg-0); }
.tails { background: var(--btn-bg); color: var(--btn-fg); transform: rotateY(180deg); }
.flip-result { min-height: 4.5rem; }
.flip-result .readout { font-size: var(--fs-2xl); white-space: normal; overflow-wrap: anywhere; }
.flip-btn { width: min(100%, 20rem); }
.history-title { font-size: var(--fs-md); }
.history { display: grid; gap: var(--sp-4); }
.history > .btn { justify-self: start; }
.flip-log { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flip-log li { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; background: var(--btn-bg); color: var(--btn-fg); }
.flip-log li.h { background: var(--accent); color: var(--bg-0); }
.rail .stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .coin { width: 13rem; height: 13rem; } }
@media (prefers-reduced-motion: reduce) { .coin-wrap.is-tossing { animation: none; } }