/* ══════════════════════════════════════════════════════════════════
   FYM Coinflip 3D — «Pile ou Face». The 3D presentation of the coinflip
   game, lifted VERBATIM from the Test Games/Coinflip3D mockup and only
   (a) scoped to #coinflip-screen.cf3d-on, (b) class-prefixed cf3d- so nothing
   collides with the platform (style.css owns global .toast/.card, etc.),
   (c) English text. The geometry/colours are the mockup's, unchanged.
   Outcome + balance are server-owned (server_mini_games coinflip on the
   fair_coin chain); this file is pure skin.
   ══════════════════════════════════════════════════════════════════ */
#coinflip-screen.cf3d-on {
  --cf-gold:     #e8c15a;
  --cf-gold-hi:  #ffe08a;
  --cf-cream:    #efe3c2;
  --cf-eyebrow:  #d9b866;
  --cf-sub:      #a99a7a;
  --cf-muted:    #8d8168;
  --cf-ruby:     #b01f2c;
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: #050403;
  font-family: 'Manrope', -apple-system, 'Helvetica Neue', sans-serif;
}
#coinflip-screen.cf3d-on::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 58% at 50% 44%,
    rgba(44, 32, 9, 0.5) 0%, rgba(7, 5, 3, 0.9) 55%, #000 100%);
}
#coinflip-screen.cf3d-on .cf3d-scene { position: absolute; inset: 0; z-index: 1; display: block; }
#coinflip-screen.cf3d-on .cf3d-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 70% 52% at 50% 46%,
    transparent 40%, rgba(8, 6, 3, 0.42) 72%, rgba(0, 0, 0, 0.85) 100%);
}

/* Top: title + balance */
#coinflip-screen.cf3d-on .cf3d-hero {
  position: absolute; z-index: 4; left: 0; right: 0;
  /* below the GameChrome bar in-app; the mockup's own offset standalone */
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 10px);
  text-align: center; pointer-events: none;
}
#coinflip-screen.cf3d-on .cf3d-eyebrow {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--cf-eyebrow);
}
#coinflip-screen.cf3d-on .cf3d-title {
  font-family: 'Bodoni Moda', Georgia, serif; font-style: italic;
  font-size: 24px; font-weight: 700; color: var(--cf-cream);
  margin-top: 1px;
}
#coinflip-screen.cf3d-on .cf3d-bal {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 6px; padding: 5px 16px; border-radius: 999px;
  background: rgba(10, 14, 10, 0.72);
  border: 1px solid rgba(222, 188, 110, 0.32);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 10px; letter-spacing: 0.16em; color: var(--cf-sub);
}
#coinflip-screen.cf3d-on .cf3d-bal b {
  font-size: 15px; color: var(--cf-gold-hi); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

#coinflip-screen.cf3d-on .cf3d-mute {
  position: absolute; z-index: 6;
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 12px); right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bodoni Moda', Georgia, serif; font-size: 15px;
  color: #e8d9ae; background: rgba(10, 14, 10, 0.78);
  border: 1px solid rgba(222, 188, 110, 0.38); cursor: pointer;
}
#coinflip-screen.cf3d-on .cf3d-mute.cf3d-off { opacity: 0.45; text-decoration: line-through; }

/* Streak ladder — vertical rail on the right */
#coinflip-screen.cf3d-on .cf3d-ladder {
  position: absolute; z-index: 4; right: 10px; top: 50%;
  transform: translateY(-58%);
  display: flex; flex-direction: column-reverse; gap: 4px;
  pointer-events: none;
}
#coinflip-screen.cf3d-on .cf3d-lad-step {
  min-width: 64px; padding: 3px 10px; border-radius: 999px;
  text-align: center;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 10px; font-weight: 600; color: var(--cf-muted);
  background: rgba(10, 14, 10, 0.6);
  border: 1px solid rgba(222, 188, 110, 0.18);
  font-variant-numeric: tabular-nums;
  transition: all 250ms ease;
}
#coinflip-screen.cf3d-on .cf3d-lad-step.cf3d-done {
  color: #241a06;
  background: linear-gradient(180deg, #f6e3ae, #c9a23f);
  border-color: rgba(255, 244, 200, 0.9);
}
#coinflip-screen.cf3d-on .cf3d-lad-step.cf3d-next {
  color: var(--cf-gold-hi);
  border-color: rgba(255, 224, 130, 0.75);
  box-shadow: 0 0 10px rgba(246, 227, 160, 0.3);
}

/* Verdict text */
#coinflip-screen.cf3d-on .cf3d-verdict {
  position: absolute; z-index: 5; left: 16px; right: 16px;
  top: 24%;
  text-align: center; pointer-events: none; opacity: 0;
}
#coinflip-screen.cf3d-on .cf3d-verdict.cf3d-on { opacity: 1; }
#coinflip-screen.cf3d-on .cf3d-v-word {
  font-family: 'Bodoni Moda', Georgia, serif; font-style: italic;
  font-size: 34px; font-weight: 700; color: var(--cf-gold-hi);
  text-shadow: 0 0 26px rgba(201, 161, 59, 0.5), 0 3px 14px rgba(0, 0, 0, 0.9);
}
#coinflip-screen.cf3d-on .cf3d-v-sub {
  margin-top: 3px; font-size: 12px; letter-spacing: 0.14em; color: var(--cf-sub);
}
#coinflip-screen.cf3d-on .cf3d-verdict.cf3d-lose .cf3d-v-word { color: #c9857a; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9); }
#coinflip-screen.cf3d-on .cf3d-verdict.cf3d-rise .cf3d-v-word,
#coinflip-screen.cf3d-on .cf3d-verdict.cf3d-rise .cf3d-v-sub {
  animation: cf3d-vRise 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cf3d-vRise {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Control sheet at the bottom */
#coinflip-screen.cf3d-on .cf3d-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(180deg, rgba(26, 19, 9, 0.86), rgba(9, 6, 3, 0.94) 34%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1.5px solid rgba(220, 180, 80, 0.85);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(246, 227, 160, 0.22);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease;
}
#coinflip-screen.cf3d-on .cf3d-sheet.cf3d-flying {
  transform: translateY(115%); opacity: 0; pointer-events: none;
}
#coinflip-screen.cf3d-on .cf3d-streak-line {
  text-align: center; padding-bottom: 9px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; letter-spacing: 0.12em; color: var(--cf-sub);
}
#coinflip-screen.cf3d-on .cf3d-streak-line b { color: var(--cf-gold-hi); font-variant-numeric: tabular-nums; }
#coinflip-screen.cf3d-on .cf3d-bet-row { display: flex; gap: 6px; justify-content: center; padding-bottom: 9px; }
#coinflip-screen.cf3d-on .cf3d-chip-btn {
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(222, 188, 110, 0.38);
  background: rgba(10, 14, 10, 0.78); cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
  color: #e8d9ae;
}
#coinflip-screen.cf3d-on .cf3d-chip-btn.cf3d-sel {
  color: var(--cf-gold-hi); border-color: rgba(255, 224, 130, 0.8);
  box-shadow: 0 0 10px rgba(246, 227, 160, 0.3);
}
#coinflip-screen.cf3d-on .cf3d-pick-row { display: flex; gap: 8px; }
#coinflip-screen.cf3d-on .cf3d-pick {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 13px 8px;
  border-radius: 14px; border: 1.5px solid rgba(222, 188, 110, 0.45);
  background: linear-gradient(180deg, rgba(24, 18, 8, 0.95), rgba(10, 7, 4, 0.98));
  cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-indent: 0.14em;
  color: var(--cf-cream);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
#coinflip-screen.cf3d-on .cf3d-pick:active { transform: scale(0.96); }
#coinflip-screen.cf3d-on .cf3d-pick:disabled { opacity: 0.45; }
#coinflip-screen.cf3d-on .cf3d-pick .cf3d-p-coin {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f6e3ae, #c9a13b 60%, #8a6a1f);
  border: 1.5px solid rgba(255, 244, 210, 0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-style: italic; color: #5a4210;
  text-indent: 0;
}
#coinflip-screen.cf3d-on .cf3d-pick .cf3d-p-coin-mini {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(255, 244, 210, 0.7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
#coinflip-screen.cf3d-on .cf3d-cash-row { display: flex; gap: 8px; padding-top: 9px; }
#coinflip-screen.cf3d-on .cf3d-cash {
  flex: 1; padding: 13px 10px; border-radius: 999px; border: none; cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-indent: 0.14em;
  color: #241a06;
  background: linear-gradient(180deg, #f6e3ae, #e8c15a 55%, #c9a23f);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 22px rgba(232, 193, 90, 0.28);
  font-variant-numeric: tabular-nums;
}
#coinflip-screen.cf3d-on .cf3d-cash:disabled { filter: grayscale(0.6) brightness(0.6); }

#coinflip-screen.cf3d-on .cf3d-toast {
  position: absolute; z-index: 11; left: 50%;
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 112px);
  transform: translateX(-50%);
  padding: 9px 20px; border-radius: 999px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 12px; letter-spacing: 0.1em; color: #241a06;
  background: linear-gradient(180deg, #f6e3ae, #c9a23f);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease;
  white-space: nowrap;
}
#coinflip-screen.cf3d-on .cf3d-toast.cf3d-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #coinflip-screen.cf3d-on .cf3d-verdict.cf3d-rise .cf3d-v-word,
  #coinflip-screen.cf3d-on .cf3d-verdict.cf3d-rise .cf3d-v-sub { animation: none; }
}