.cf-stage { display: grid; justify-items: center; gap: 14px; padding: 18px 0 6px; }
.cf-scene { width: 190px; height: 190px; perspective: 900px; }
.cf-toss { animation: cf-toss 1.4s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes cf-toss { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-70px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
.cf-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier(0.2, 0.75, 0.25, 1); cursor: pointer; border-radius: 50%; }
.cf-coin:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.cf-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #6b4a00; font-weight: 800; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.35), inset 0 0 0 11px rgba(120, 80, 0, 0.35), 0 10px 26px -10px rgba(80, 50, 0, 0.6); user-select: none; }
.cf-heads { background: radial-gradient(circle at 35% 30%, #fff6c9, #f6c945 45%, #c99212 100%); }
.cf-tails { background: radial-gradient(circle at 35% 30%, #f3f4f8, #c4c9d6 45%, #8c93a6 100%); color: #3c4256; transform: rotateX(180deg); }
.cf-face b { font-size: 4.2rem; line-height: 1; letter-spacing: -0.04em; }
.cf-face small { font-size: 0.78rem; letter-spacing: 0.22em; }
#cf-result { font-size: 1.6rem; font-weight: 800; margin: 0; min-height: 2.2rem; text-align: center; }
.cf-split { height: 12px; border-radius: 999px; background: #a3abbf; overflow: hidden; border: 1px solid var(--line); }
.cf-split span { display: block; height: 100%; background: linear-gradient(90deg, #f6c945, #c99212); transition: width 0.3s ease; }
#cf-history, #cf-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.cf-dot, .cf-mini { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.72rem; font-weight: 800; }
.cf-dot-H, .cf-mini-H { background: radial-gradient(circle at 35% 30%, #fff6c9, #f6c945 50%, #c99212); color: #6b4a00; }
.cf-dot-T, .cf-mini-T { background: radial-gradient(circle at 35% 30%, #f3f4f8, #c4c9d6 50%, #8c93a6); color: #2d3245; }
.cf-mini { width: 34px; height: 34px; font-size: 0.85rem; }
.cf-mini-anim { animation: cf-mini 0.45s ease both; }
@keyframes cf-mini { from { transform: rotateX(540deg) scale(0.4); opacity: 0; } }
.cf-many-sum { font-weight: 700; margin: 0; }
@media (prefers-reduced-motion: reduce) { .cf-coin { transition: none; } }