/* ==========================================================================
   Coin Toss — builds on common.css tokens
   ========================================================================== */
body { padding-bottom: 168px; }

.board-wrap { max-width: 520px; margin: 0 auto; padding: 6px 14px; text-align: center; }
.board-title { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }

.coin-stage {
  display: flex; justify-content: center; align-items: center;
  margin: 26px 0 30px; perspective: 900px;
}
.coin {
  position: relative; width: 140px; height: 140px;
  transform-style: preserve-3d;
  transition: transform 1.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 56px; font-weight: 800; color: #1a0d05;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, var(--gold-dim) 100%);
  border: 5px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 0 22px rgba(0,0,0,0.18);
  backface-visibility: hidden;
}
.coin-face.tails { transform: rotateY(180deg); }

.side-picker { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.side-btn {
  flex: 1; max-width: 160px;
  padding: 14px 10px; border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(255,255,255,0.03);
  color: var(--ivory); font-weight: 700; font-size: 13.5px;
}
.side-btn.selected {
  border-color: var(--gold-bright);
  background: rgba(212,175,55,0.16);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.4);
}

.outcome-box {
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3);
  font-size: 13.5px; font-weight: 700; text-align: center; padding: 10px 14px;
  border-radius: 10px; display: none; margin-top: 6px;
}

@media (max-width: 420px) {
  .coin, .coin-face { width: 116px; height: 116px; }
  .coin-face { font-size: 46px; }
}