.flipwrap { display: flex; flex-direction: column; align-items: center; gap: 18px;
            padding: 40px 34px; border-radius: var(--r-lg); background: var(--panel); width: min(100%, 460px); }

.coin3d {
  width: 132px; height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #241902;
  font-size: 40px;
  font-weight: 700;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
  transition: background .2s var(--ease);
}
.coin3d.spin { animation: flipspin .62s var(--ease); }
@keyframes flipspin {
  0%   { transform: rotateY(0) scale(1); }
  50%  { transform: rotateY(900deg) scale(1.12); }
  100% { transform: rotateY(1800deg) scale(1); }
}
.coin3d.win  { background: var(--green); color: #04160B; }
.coin3d.lose { background: var(--red); color: #fff; }

.flipwrap > b { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.flipwrap .note { font-size: 13.5px; color: var(--faint); text-align: center; }

.calls { display: flex; gap: 10px; width: 100%; }
.callbtn { flex: 1; min-height: 56px; border-radius: var(--r); background: var(--panel-2); color: var(--text); font-weight: 600; }
.callbtn.heads:hover:not([disabled]) { background: var(--green); color: #04160B; }
.callbtn.tails:hover:not([disabled]) { background: var(--blue); color: #fff; }
#deal, #bank { width: 100%; }