.cf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 1rem; align-items: start; }
.cf-stage { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 2.2rem 1rem; perspective: 900px; }
.cf-coin { position: relative; width: 170px; height: 170px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
/* A metal coin: reeded edge, a raised rim, an inner ring and stamped (embossed) lettering. */
.cf-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border-radius: 50%; backface-visibility: hidden;
  --m1: #fbe08a; --m2: #e3b53a; --m3: #a9790f; --ink: #7a5406; color: var(--ink);
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / .6), transparent 38%),
    radial-gradient(circle, var(--m1) 0 58%, var(--m3) 59% 60.5%, var(--m1) 61.5% 62.5%, var(--m2) 63.5% 83%, var(--m3) 84%, transparent 85%),
    repeating-conic-gradient(var(--m3) 0 1.6deg, var(--m1) 1.6deg 3.2deg);
  box-shadow: inset 0 0 0 2px var(--m3), inset 0 -8px 16px rgb(90 60 0 / .35), inset 0 6px 12px rgb(255 255 255 / .35), 0 14px 26px -12px rgb(0 0 0 / .55); }
.cf-tails { transform: rotateY(180deg); --m1: #f4f6f9; --m2: #c3cad5; --m3: #7d8796; --ink: #4a5361; }
.cf-face b { font: 700 3.6rem/1 Georgia, 'Times New Roman', serif; text-shadow: 0 1px 0 rgb(255 255 255 / .7), 0 -1px 0 rgb(0 0 0 / .3); }
.cf-face small { font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: .66rem; text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.cf-result { margin: 0; font: 700 1.5rem var(--font-display); min-height: 1.5em; }
.cf-score { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cf-score > div { display: flex; flex-direction: column; align-items: center; padding: .8rem; border-radius: var(--radius); background: var(--surface-sunken); }
.cf-score strong { font: 800 2rem var(--font-display); }
.cf-score span { font-size: .85rem; color: var(--text-soft); }
.cf-history { display: flex; flex-wrap: wrap; gap: .3rem; }
.cf-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .72rem; font-weight: 800; }
.cf-dot.is-h { background: #facc15; color: #713f12; } .cf-dot.is-t { background: #cbd5e1; color: #1e293b; }
@media (max-width: 760px) { .cf { grid-template-columns: minmax(0, 1fr); } }