/* ===== Wallet coin animations + balance pill ===== */
.coin-ico { width:18px; height:18px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 2px 3px rgba(180,110,0,.35)); }
.coin-ico.xs { width:15px; height:15px; margin:-2px 3px 0 0; }
.coin-ico.spin { animation:none; }
@keyframes coinSpinY { 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }
.wallet-pill .coin-ico { width:18px; height:18px; animation:none; }
.wallet-plus { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#10b981,#059669); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; font-weight:900; line-height:1; margin-left:2px; box-shadow:0 3px 8px rgba(16,185,129,.45); transition:transform .2s cubic-bezier(.34,1.56,.64,1); animation:plusPulse 2.4s ease-in-out infinite; }
.wallet-plus:active { transform:scale(.8) rotate(90deg); }
@keyframes plusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
.bal-up { animation:balUp .9s ease; } .bal-down { animation:balDown .9s ease; }
@keyframes balUp { 0%,100%{color:inherit;transform:scale(1)} 30%{color:#10b981;transform:scale(1.12)} }
@keyframes balDown { 0%,100%{color:inherit;transform:scale(1)} 30%{color:#ef4444;transform:scale(1.12)} }

.wfx { position:fixed; inset:0; z-index:20000; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%,rgba(30,27,75,.94),rgba(2,6,23,.97)); opacity:0; transition:opacity .35s; pointer-events:all; color:#fff; text-align:center; padding:20px; }
.wfx.show { opacity:1; }
.wfx-pill { position:absolute; top:max(18px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:40px; padding:7px 10px 7px 8px; font-weight:800; font-size:1.05rem; backdrop-filter:blur(6px); }
.wfx-pill-coin { width:30px; height:30px; }
.wfx-pill.pulse { animation:pillPulse .5s ease 3; }
.wfx-pill.pulse.down { animation-name:pillPulseDown; }
@keyframes pillPulse { 50%{transform:translateX(-50%) scale(1.1);box-shadow:0 0 22px rgba(16,185,129,.8)} }
@keyframes pillPulseDown { 50%{transform:translateX(-50%) scale(.94);box-shadow:0 0 22px rgba(239,68,68,.8)} }
.wfx-plus { width:22px; height:22px; border-radius:50%; background:#10b981; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.wfx-stage { position:relative; width:190px; height:190px; display:flex; align-items:center; justify-content:center; perspective:700px; margin-bottom:22px; }
.wfx-coin { width:150px; height:150px; transform:scale(0); transition:transform .6s cubic-bezier(.34,1.56,.64,1); animation:coinSpinY 1.6s linear infinite; filter:drop-shadow(0 12px 28px rgba(251,191,36,.55)); }
.wfx.show .wfx-coin { transform:scale(1); }
.wfx-coin img { width:100%; height:100%; object-fit:contain; }
.wfx.fly .wfx-coin, .wfx.done .wfx-coin { transition:transform .7s ease, opacity .7s; transform:scale(.55); opacity:.35; }
.wfx.deposit.fly .wfx-ring { opacity:0; }
.wfx-ring { position:absolute; inset:0; border-radius:50%; border:3px solid rgba(251,191,36,.55); animation:ringOut 1.8s ease-out infinite; }
.wfx-ring.r2 { animation-delay:.9s; }
@keyframes ringOut { 0%{transform:scale(.5);opacity:.9} 100%{transform:scale(1.5);opacity:0} }
.wfx.withdraw .wfx-ring { border-color:rgba(248,113,113,.6); }
.wfx-title { font-size:1.35rem; font-weight:900; margin-bottom:6px; animation:wfxUp .5s .15s both; }
.wfx-amt { font-size:2.6rem; font-weight:900; letter-spacing:.5px; animation:wfxUp .5s .25s both; }
.wfx-amt.up { color:#34d399; text-shadow:0 0 24px rgba(52,211,153,.6); }
.wfx-amt.down { color:#f87171; text-shadow:0 0 24px rgba(248,113,113,.6); }
.wfx-sub { margin-top:8px; font-size:.85rem; opacity:.75; animation:wfxUp .5s .35s both; }
@keyframes wfxUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.wfx.done .wfx-sub { opacity:0; }
.wfx.deposit.done .wfx-title::after { content:' ✓'; color:#34d399; }
.wfx.withdraw.leave .wfx-coin { transition:transform .75s cubic-bezier(.5,0,1,.5), opacity .75s; transform:translateY(-320px) scale(.4) !important; opacity:0 !important; animation:none; }
.wfx-fly { position:fixed; width:28px; height:28px; z-index:20001; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* ===== Match countdown (days / hours / minutes / seconds) ===== */
.cd-wrap { display:inline-flex !important; align-items:center; gap:4px; vertical-align:middle; }
.cd-seg { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:30px; padding:3px 5px; border-radius:8px; background:rgba(15,23,42,.72); border:1px solid rgba(255,255,255,.18); line-height:1; backdrop-filter:blur(4px); }
.cd-seg b { font-size:.82rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.cd-seg i { font-style:normal; font-size:.5rem; font-weight:800; letter-spacing:.6px; color:#cbd5e1; margin-top:2px; }
.cd-far .cd-seg b { color:#fde68a; } .cd-soon .cd-seg b { color:#fdba74; }
.cd-urgent .cd-seg { background:rgba(127,29,29,.8); border-color:rgba(252,165,165,.5); } .cd-urgent .cd-seg b { color:#fecaca; }
.cd-seg.sec b { animation:cdTick 1s steps(1) infinite; }
@keyframes cdTick { 0%{transform:translateY(-3px);opacity:.5} 15%,100%{transform:none;opacity:1} }
.countdown-ended { display:inline-flex; align-items:center; gap:5px; background:#10b981; color:#fff; font-weight:800; font-size:.72rem; padding:4px 10px; border-radius:20px; animation:plusPulse 1.6s infinite; }

/* gift code button on the wallet card */
.gift-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); color:#fff; font-weight:800; font-size:.78rem; padding:8px 14px; border-radius:30px; cursor:pointer; font-family:inherit; backdrop-filter:blur(4px); transition:transform .2s cubic-bezier(.34,1.56,.64,1); animation:giftGlow 2.4s ease-in-out infinite; }
.gift-btn:active { transform:scale(.92); }
.gift-btn i { animation:giftWiggle 2.4s ease-in-out infinite; }
@keyframes giftGlow { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)} 50%{box-shadow:0 0 0 8px rgba(255,255,255,0)} }
@keyframes giftWiggle { 0%,70%,100%{transform:rotate(0)} 78%{transform:rotate(-14deg)} 86%{transform:rotate(12deg)} 94%{transform:rotate(-6deg)} }