/* PUDDLE — effects layer (fx.js). Colours come from theme variables so Halloween re-maps them. */
.fx-canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9000; }
.fx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fx-win { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.fx-win-card { justify-self: center; pointer-events: auto; cursor: pointer; text-align: center; min-width: min(320px, 100%); max-width: 100%; padding: 26px 40px 28px; border-radius: 16px; background: var(--bg-1, #1A2C38); border: 1px solid var(--bg-3, #3E5568); box-shadow: 0 0 0 1px var(--gold, #FFC800), 0 18px 60px rgba(0, 0, 0, .55); animation: fxPop .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.fx-win-card.mega { box-shadow: 0 0 0 2px var(--gold, #FFC800), 0 0 40px var(--gold, #FFC800), 0 18px 60px rgba(0, 0, 0, .55); }
.fx-win-card.out { animation: fxOut .24s ease-in both; }
.fx-win-label { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .28em; text-indent: .28em; color: var(--gold, #FFC800); }
.fx-win-amt { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: clamp(36px, 10vw, 56px); line-height: 1.1; margin: 8px 0 12px; color: var(--green, #00E701); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fx-win-mult { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ice, #64D2FF); border: 1px solid var(--ice, #64D2FF); font-variant-numeric: tabular-nums; }
@keyframes fxPop { from { opacity: 0; transform: scale(.7) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fxOut { to { opacity: 0; transform: scale(.94) translateY(-8px); } }

/* plinko slot landing pop, roulette winning cell */
.pl-slot.fx-pop { animation: fxSlot .5s ease-out; }
@keyframes fxSlot { 0% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 var(--c, var(--gold, #FFC800)); } 25% { transform: translateY(5px) scale(1.18); box-shadow: 0 0 16px 3px var(--c, var(--gold, #FFC800)); } 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 transparent; } }
.ro-cell.fx-win { position: relative; z-index: 1; outline: 3px solid var(--gold, #FFC800); outline-offset: 2px; animation: fxCell .9s ease-in-out 3; }
@keyframes fxCell { 50% { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
    .fx-win-card, .fx-win-card.out, .pl-slot.fx-pop, .ro-cell.fx-win { animation: none; }
}