/* Coinflip: a 3D gold coin that tumbles in the air and lands on the server's side; heads is violet, tails is gold. */
.play-coinflip::before { background: linear-gradient(135deg, rgba(255, 201, 64, 0.75), rgba(255, 201, 64, 0) 35%, rgba(139, 92, 255, 0) 65%, rgba(139, 92, 255, 0.55)); }
.coin-screen { align-content: center; gap: 10px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 201, 64, 0.14), transparent 60%), linear-gradient(180deg, #110d24, #0a0819); }
.cf-stage { position: relative; display: grid; place-items: center; width: 100%; height: clamp(190px, 26vw, 260px); perspective: 900px; overflow: hidden; }
.cf-coin {
  --spin: 0deg; --lift: 0px;
  position: relative; width: clamp(130px, 18vw, 180px); aspect-ratio: 1; transform-style: preserve-3d;
  transform: translateY(var(--lift)) rotateX(var(--spin));
  transition: transform var(--flip-ms, 0ms) cubic-bezier(0.2, 0.75, 0.25, 1);
}
.cf-coin.is-air { animation: coin-air var(--flip-ms, 1400ms) cubic-bezier(0.3, 0, 0.3, 1); }
@keyframes coin-air { 0% { translate: 0 0; } 45% { translate: 0 -34%; } 100% { translate: 0 0; } }
.cf-face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.25) inset, 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 18px 30px -10px rgba(0, 0, 0, 0.7);
}
.cf-heads { background: radial-gradient(circle at 35% 30%, #c3a8ff, #7a4df0 55%, #4a24b4); color: #fff; }
.cf-heads .gi { width: 52%; height: 52%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.cf-tails { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc940 55%, #c27e00); color: #5a3a00; transform: rotateX(180deg); }
.cf-glyph { font: 800 clamp(64px, 8vw, 96px)/1 var(--display); letter-spacing: -0.04em; }
.cf-shadow { position: absolute; bottom: 6%; width: 40%; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(6px); }
.coin-result { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--display); color: #d9d3ff; min-height: 1.2em; }
.coin-result.is-win { color: var(--win); text-shadow: 0 0 20px rgba(31, 224, 138, 0.6); }
.coin-result.is-lose { color: var(--lose); text-shadow: 0 0 18px rgba(255, 61, 110, 0.5); }
.coin-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.side-dot { width: 14px; height: 14px; border-radius: 50%; }
.side-h { background: radial-gradient(circle at 35% 30%, #c3a8ff, #6d3df0); }
.side-t { background: radial-gradient(circle at 35% 30%, #fff1b8, #e09200); }
.rchip.ch-h { color: #d9d3ff; background: rgba(139, 92, 255, 0.18); box-shadow: 0 0 0 1px rgba(177, 140, 255, 0.4) inset; }
.rchip.ch-t { color: #ffe08a; background: rgba(255, 201, 64, 0.12); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.4) inset; }
.play-coinflip .field-profit .readonly { color: var(--gold); background: rgba(255, 201, 64, 0.07); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.3) inset; }
.play-coinflip .action-btn { color: #241500; background: linear-gradient(180deg, #ffe08a, #ffb300); box-shadow: 0 6px 0 #a86a00, 0 14px 34px -8px rgba(255, 179, 0, 0.8); }
.play-coinflip .action-btn:active:not([aria-disabled="true"]) { box-shadow: 0 2px 0 #a86a00, 0 6px 16px -8px rgba(255, 179, 0, 0.8); }
@media (prefers-reduced-motion: reduce) { .cf-coin { transition: none; } .cf-coin.is-air { animation: none; } }
@media (max-width: 560px) { .cf-stage { height: 180px; } }