/* Coin Flip — 3D coin, driven by the Web Animations API in coin-flip.js */
.coin-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 32px;
  perspective: 900px;
}
.coin {
  width: 160px;
  height: 160px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.coin__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.coin__face--heads { background: var(--accent); color: var(--paper-raised); }
.coin__face--tails { background: var(--ink); color: var(--paper); transform: rotateY(180deg); }
.coin__face-icon { font-size: 2.2rem; }