/* v6.3 재료 내기 결과 연출 */
.betfx { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(6, 7, 14, .9); color: #fff3d6; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: "Jua", sans-serif; animation: bf-in .25s ease-out both; }
.betfx .bf-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .75) 100%); opacity: .55; }
.betfx.is-beating .bf-vig { animation: bf-beat var(--bf-beat, 1s) ease-in-out infinite; }
.betfx.is-still .bf-vig { opacity: 1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .92) 100%); transition: opacity .3s; }
.betfx.is-win .bf-vig { background: radial-gradient(ellipse at center, rgba(255, 214, 106, .18) 10%, rgba(0, 0, 0, .55) 100%); opacity: .8; }
.betfx.is-lose .bf-vig { background: radial-gradient(ellipse at center, rgba(120, 140, 200, .12) 10%, rgba(0, 0, 0, .7) 100%); opacity: .8; }
.bf-box { position: relative; width: min(92vw, 420px); text-align: center; padding: 18px 12px; }
.bf-title { margin: 0 0 6px; font-size: 24px; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); min-height: 30px; }
.bf-sub { margin: 10px 0 4px; font-size: 14px; line-height: 1.4; color: #ffe9b8; min-height: 40px; }
.bf-count { margin: 6px 0 0; font-size: 20px; color: #ffd36a; min-height: 26px; }
.bf-tip { margin: 10px 0 0; font-size: 12px; opacity: .65; }
.bf-stage { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; min-height: 96px; padding: 8px; }
.betfx.dense .bf-stage { gap: 4px; }
.bf-card { position: relative; width: 54px; height: 70px; border-radius: 10px; border: 2px solid var(--rc, #fff); background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); box-shadow: 0 0 12px color-mix(in srgb, var(--rc, #fff) 70%, transparent), inset 0 0 8px rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; }
.betfx.dense .bf-card { width: 38px; height: 50px; border-radius: 8px; }
.bf-card .gem { transform: scale(1.5); }
.bf-card.is-in { animation: bf-rise .45s cubic-bezier(.2, 1.3, .4, 1) both, bf-shake .5s ease-in-out .45s infinite; }
.betfx.is-still .bf-card.is-in { animation: bf-rise .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.bf-card.is-last { box-shadow: 0 0 22px var(--rc, #fff), inset 0 0 10px rgba(255, 255, 255, .25); }
.bf-card.is-glow { animation: bf-glow 1s ease-in-out infinite alternate; }
.bf-card.is-new { animation: bf-grow .5s cubic-bezier(.2, 1.4, .4, 1) both; border-color: #ffd36a; }
.bf-card.is-vanish { animation: bf-vanish .55s ease-in forwards; }
.bf-card.is-back { border-color: #9fe8b8; }
.bf-spark { position: absolute; left: 50%; top: 40%; color: #ffe08a; font-style: normal; font-size: 14px; pointer-events: none; animation: bf-spark .85s ease-out forwards; }
.bf-confetti { position: absolute; top: -20px; font-style: normal; font-size: 18px; color: var(--cc, #ffd36a); pointer-events: none; animation: bf-fall 2s ease-in forwards; }
.bf-skip { position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); min-height: 44px; min-width: 88px; z-index: 2; }
.betfx.is-shaky .bf-box { animation: bf-jolt .12s linear infinite; }
.betfx.tier-2 .bf-title, .betfx.tier-3 .bf-title { font-size: 28px; }
.betfx.tier-3.is-win .bf-title { color: #ffd36a; text-shadow: 0 0 18px #ffb347; }
.betfx.fx-low .bf-card.is-in, .betfx.fx-low .bf-card.is-glow, .betfx.fx-low .bf-vig, .betfx.fx-low.is-shaky .bf-box { animation: none; }
.betfx.fx-low .bf-card.is-in { opacity: 1; }
.betfx.fx-high .bf-card.is-in { animation-duration: .45s, .35s; }
.betfx.fx-high.tier-3.is-shaky .bf-box { animation-duration: .08s; }
body.betfx-open { overscroll-behavior: contain; }
@keyframes bf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bf-beat { 0%, 100% { opacity: .5; } 12% { opacity: .95; } 24% { opacity: .55; } 36% { opacity: .85; } 60% { opacity: .5; } }
@keyframes bf-rise { from { opacity: 0; transform: translateY(46px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bf-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(calc(var(--shake, 2deg) * -1)); } 75% { transform: rotate(var(--shake, 2deg)); } }
@keyframes bf-glow { from { filter: brightness(1); transform: scale(1); } to { filter: brightness(1.35); transform: scale(1.06); } }
@keyframes bf-grow { from { opacity: 0; transform: scale(.2) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes bf-vanish { 0% { opacity: 1; transform: none; } 60% { opacity: .7; transform: scale(1.12) rotate(8deg); } 100% { opacity: 0; transform: scale(.1) rotate(-30deg); } }
@keyframes bf-spark { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3); } }
@keyframes bf-fall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(105vh) rotate(360deg); opacity: .9; } }
@keyframes bf-jolt { 0% { transform: translate(0, 0); } 33% { transform: translate(1px, -1px); } 66% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .betfx *, .betfx { animation: none !important; } }