.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin-board { display: grid; gap: 22px; justify-items: center; align-content: center; }
/* 2D flip: squash the coin to nothing and back a few times; the face swaps while it's edge-on. */
.coin { width: 190px; height: 190px; position: relative; }
.coin.flipping { animation: flip 1.1s cubic-bezier(.3, .7, .5, 1); }
@keyframes flip {
  0% { transform: scaleX(1) translateY(0); } 12% { transform: scaleX(0) translateY(-30px); } 25% { transform: scaleX(1) translateY(-55px); }
  37% { transform: scaleX(0) translateY(-70px); } 50% { transform: scaleX(1) translateY(-70px); } 62% { transform: scaleX(0) translateY(-55px); }
  75% { transform: scaleX(1) translateY(-30px); } 88% { transform: scaleX(0) translateY(-8px); } 100% { transform: scaleX(1) translateY(0); }
}
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
              background: var(--gold); box-shadow: inset 0 0 0 10px #e0a400, inset 0 0 0 14px #fff2b0; overflow: hidden; }
.coin .face img { width: 70%; height: 70%; object-fit: contain; }
.coin .tails { background: #c4a2ff; box-shadow: inset 0 0 0 10px #8b6cff, inset 0 0 0 14px #efe6ff; }
.coin[data-face="heads"] .tails, .coin[data-face="tails"] .heads { visibility: hidden; }
.flips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }
.flips span { font: 700 12px var(--body); padding: 5px 8px; border-radius: 6px; background: var(--panel-2); }
.flips span.ok { background: #4dff8f; color: var(--ink); }
.flips span.bad { background: #d8344d; }