/* coin-flip: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.btn-lg { padding: 13px 26px; font-size: 1.05rem; }
.dice-history ol, .coin-recent { margin: 0; }
.coin-stage { display: grid; place-items: center; padding: 26px 0 8px; perspective: 900px; }
.coin-face {
    position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden;
    font: 800 3.6rem var(--display); color: #7A4A00;
    background: radial-gradient(circle at 35% 30%, #FFE7A3, #F5B93A 55%, #C98A12);
    box-shadow: inset 0 0 0 8px rgb(122 74 0 / 0.25), 0 12px 24px -10px rgb(0 0 0 / 0.5);
}
.coin-tails { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #F1F4F9, #C3CCD8 55%, #8C97A6); color: #3B4657; box-shadow: inset 0 0 0 8px rgb(59 70 87 / 0.25), 0 12px 24px -10px rgb(0 0 0 / 0.5); }
.coin-result { margin: 14px 0; text-align: center; font: 800 2rem var(--display); color: var(--ink); }
.coin-actions { justify-content: center; }
.coin-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 20px; }
.coin-tally div { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.coin-tally span { color: var(--slate); font-size: 0.85rem; }
.coin-tally strong { font: 800 1.5rem var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.coin-recent { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.coin-recent span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 0.72rem var(--text); }
.coin-recent .is-h { background: #F5B93A; color: #5A3700; }
.coin-recent .is-t { background: #C3CCD8; color: #2B3442; }