/* ============ Coin Flip game ============ */
.coinflip { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow-x: clip; }

/* ---- Stage ---- */
.cf-stage {
  margin: 12px 14px 0; padding: 34px 16px 0; border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240,185,11,.13), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cf-stage .history-strip { width: 100%; margin-top: 4px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }

/* ---- 3D coin ---- */
.coin-floater { animation: coin-float 3.8s ease-in-out infinite; will-change: transform; }
@keyframes coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.coin-scene {
  --cs: clamp(112px, 30vw, 150px);
  position: relative; width: var(--cs); height: var(--cs); perspective: 760px;
  margin-bottom: 14px; transition: filter .25s ease; will-change: filter;
}
.coin-scene.win  { filter: drop-shadow(0 8px 26px rgba(14,203,129,.7)); }
.coin-scene.lose { filter: drop-shadow(0 8px 26px rgba(246,70,93,.62)); }
.coin-scene.land { animation: coin-land .5s cubic-bezier(.22,1.55,.36,1); }
@keyframes coin-land { 0% { transform: scale(.92); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Soft contact shadow — shrinks while the coin is in the air, snaps back on the fall. */
.coin-shadow {
  position: absolute; left: 50%; bottom: -14px; width: 82%; height: 16px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  filter: blur(5px); transition: transform .45s ease, opacity .45s ease;
}
.coin-scene.air .coin-shadow { transform: translateX(-50%) scale(.55); opacity: .4; }
.coin-scene.fall .coin-shadow { transition: transform .38s cubic-bezier(.45,.04,.8,.4), opacity .38s ease; }

/* Vertical throw layer — the coin itself only rotates.
   Toss = launch up toward the camera (translate + scale), hover at the apex
   while the result is pending, gravity fall, then diminishing bounces + wobble. */
.coin-lift { position: relative; width: 100%; height: 100%; will-change: transform; }
.coin-scene.air .coin-lift {
  animation: coin-rise .5s cubic-bezier(.18,.8,.3,1) forwards,
             coin-hover 1.2s ease-in-out .5s infinite alternate;
}
@keyframes coin-rise  { from { transform: translateY(0) scale(1); } to { transform: translateY(-48px) scale(1.15); } }
@keyframes coin-hover { from { transform: translateY(-48px) scale(1.15); } to { transform: translateY(-57px) scale(1.18); } }
.coin-scene.fall .coin-lift { animation: coin-fall .4s cubic-bezier(.45,.04,.8,.4) forwards; }
@keyframes coin-fall { from { transform: translateY(-52px) scale(1.16); } to { transform: translateY(0) scale(1); } }
/* Touchdowns at 0% / 30% / 53% / 71% — coinLand() clinks are timed to these. */
.coin-lift.bounce { animation: coin-bounce .68s ease-out forwards; }
@keyframes coin-bounce {
  0%   { transform: translateY(0) rotateZ(0); }
  14%  { transform: translateY(-24px) rotateZ(2.5deg); }
  30%  { transform: translateY(0) rotateZ(-2deg); }
  42%  { transform: translateY(-10px) rotateZ(1.6deg); }
  53%  { transform: translateY(0) rotateZ(-1.2deg); }
  63%  { transform: translateY(-4px) rotateZ(.8deg); }
  71%  { transform: translateY(0) rotateZ(-.5deg); }
  100% { transform: translateY(0) rotateZ(0); }
}

.coin {
  --ct: calc(var(--cs) * .05);   /* half thickness */
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(0deg);
}
.coin.spin { animation: coin-spin .32s linear infinite; transition: none; }
@keyframes coin-spin { from { transform: rotateX(0); } to { transform: rotateX(360deg); } }

/* Edge: stacked slabs between the two faces fake a milled cylinder. */
.coin-slab {
  position: absolute; inset: 1px; border-radius: 50%;
  transform: translateZ(calc(var(--ct) * var(--z, 0) * .92));
  background: linear-gradient(180deg, #a8830a 0%, #7c6005 50%, #a8830a 100%);
}

.coin-face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.coin-face.heads {
  transform: translateZ(var(--ct));
  background: radial-gradient(circle at 32% 28%, #ffeaa6 0%, #f8d12f 36%, #f0b90b 64%, #c08f07 100%);
  color: #6e5303;
}
.coin-face.tails {
  transform: rotateX(180deg) translateZ(var(--ct));
  background: radial-gradient(circle at 32% 28%, #f5f7fb 0%, #d9dee8 36%, #b6bfce 64%, #848fa3 100%);
  color: #46505f;
}
/* Milled rim ticks. */
.coin-face::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(0,0,0,.26) 0deg 4deg, transparent 4deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 84%, #000 85%);
  mask: radial-gradient(circle, transparent 84%, #000 85%);
}
/* Embossed inner ring. */
.coin-face::after {
  content: ''; position: absolute; inset: 11%; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.13);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.18);
}
.cf-letter {
  font-size: calc(var(--cs) * .34); font-weight: 800; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 1px rgba(0,0,0,.28);
}
.cf-word { font-size: calc(var(--cs) * .08); font-weight: 700; letter-spacing: 3px; opacity: .72; }

/* ---- Stage labels ---- */
.cf-pred { font-size: 14px; color: var(--muted); letter-spacing: .3px; }
.cf-pred b { font-weight: 700; }
.cf-pred b.heads { color: var(--accent); }
.cf-pred b.tails { color: #cdd4e0; }
.cf-readout { font-size: 13px; color: var(--muted); }
.cf-readout b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* History pills: H gold / T silver, win-lose border. */
.cf-pill { min-width: 30px; text-align: center; }
.cf-pill.heads { color: var(--accent); }
.cf-pill.tails { color: #cdd4e0; }
.cf-pill.win  { border-color: rgba(14,203,129,.45); }
.cf-pill.lose { border-color: rgba(246,70,93,.45); }

/* ---- Controls ---- */
.cf-controls {
  margin: 12px 14px calc(14px + env(safe-area-inset-bottom)); padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}

.cf-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  transition: background .15s, color .15s, border-color .15s, transform .08s ease;
}
.cf-btn:active { transform: scale(.97); }
.cf-btn:disabled { opacity: .55; }
.cf-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
}
.cf-btn.heads .cf-dot { background: radial-gradient(circle at 35% 30%, #ffeaa6, #f0b90b 72%); }
.cf-btn.tails .cf-dot { background: radial-gradient(circle at 35% 30%, #f5f7fb, #97a1b4 72%); }
.cf-btn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.cf-btn-txt b { font-size: 14px; font-weight: 700; letter-spacing: .6px; }
.cf-btn-txt small { font-size: 10px; font-weight: 600; letter-spacing: 1px; opacity: .65; text-transform: uppercase; }
.cf-btn.heads.active { background: rgba(240,185,11,.15); color: var(--accent); border-color: rgba(240,185,11,.5); }
.cf-btn.tails.active { background: rgba(185,195,210,.13); color: #cdd4e0; border-color: rgba(185,195,210,.45); }

.coinflip .launch-btn {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1a1300;
  box-shadow: 0 6px 18px rgba(240,185,11,.3);
  transition: transform .07s ease, filter .15s ease, box-shadow .25s ease;
}
.coinflip .launch-btn:active { transform: scale(.985); }
.coinflip .launch-btn:not(:disabled) { animation: flip-glow 2.3s ease-in-out infinite; }
@keyframes flip-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(240,185,11,.28); } 50% { box-shadow: 0 8px 28px rgba(240,185,11,.5); } }

/* ---- Mobile: native bottom tab bar (Games / Play / My plays) ---- */
@media (max-width: 879px) {
  .coinflip { padding-bottom: 74px; }
  .coinflip .mybets { display: none; }
  .coinflip.view-plays .mybets { display: block; min-height: 60vh; }
  .coinflip.view-plays .cf-stage,
  .coinflip.view-plays .cf-controls { display: none; }
}