/* =====================================================================================================
   Fruit Wagers fun layer: live feed, fight-poster cards, flags, empty-board showcase, scale, deal bar,
   full-screen moments, badges, leaders. Pure CSS motion; every animation stops for reduced motion.
   ===================================================================================================== */

/* ---- header extras ---- */
#fruit-wagers .bpx-sound { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255, 203, 92, .4);
  background: rgba(255, 203, 92, .08); color: #ffd982; font: 800 0.76rem/1 var(--label); letter-spacing: .1em; }
#fruit-wagers .bpx-sound[aria-pressed="true"] { background: linear-gradient(180deg, #ffe08f, #f4b942); color: #2a1200; box-shadow: 0 0 14px rgba(255, 203, 92, .6); }
#fruit-wagers .bpx-sound .bp-ico { width: 14px; height: 14px; }
#fruit-wagers .bpx-streak { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px; border-radius: 99px; font: 900 .78rem/1 var(--display);
  color: #2a1200; background: linear-gradient(180deg, #ffe08f, #ff9d2e); box-shadow: 0 0 12px rgba(255, 157, 46, .7); animation: bpx-flame 1.6s ease-in-out infinite; }
#fruit-wagers .bpx-streak .bp-ico { width: 14px; height: 14px; }
@keyframes bpx-flame { 50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255, 157, 46, .95); } }

/* ---- live feed ---- */
.bpx-ticker { display: flex; align-items: stretch; margin: 0 0 12px; overflow: hidden; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 203, 92, .12), rgba(0, 0, 0, .35) 30%); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .35); }
.bpx-tkhead { z-index: 2; display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 0 16px; font: 900 0.76rem/1 var(--label); letter-spacing: .16em; color: #2a1200;
  background: linear-gradient(180deg, #ffe08f, #f4b942 60%, #d98b17); }
.bpx-tkhead .bp-ico { width: 15px; height: 15px; }
.bpx-tkwin { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.bpx-tktrack { display: flex; width: max-content; animation: bpx-marquee 46s linear infinite; }
.bpx-ticker:hover .bpx-tktrack { animation-play-state: paused; }
.bpx-tk { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; white-space: nowrap; font-size: .82rem; color: #f0e6ff; }
.bpx-tk i { display: inline-flex; color: #ffcb5c; } .bpx-tk i .bp-ico { width: 15px; height: 15px; }
.bpx-tk b { color: #fff; } .bpx-tk em { font-style: normal; color: #ffd982; font-weight: 800; } .bpx-tk small { color: #b9a6d0; }
.bpx-tk.upset i { color: #ff9d2e; filter: drop-shadow(0 0 6px #ff9d2e); }
.bpx-tk::after { content: "◆"; margin-left: 18px; color: rgba(255, 203, 92, .45); }
@keyframes bpx-marquee { to { transform: translateX(-50%); } }

/* ---- empty board: the showcase ---- */
.bpx-show { position: relative; display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); align-items: center; gap: 26px; padding: 26px 30px; overflow: hidden; isolation: isolate;
  border-radius: 24px; background: radial-gradient(40% 90% at 14% 50%, rgba(255, 203, 92, .22), transparent 70%), radial-gradient(45% 120% at 100% 0, rgba(176, 77, 255, .4), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 203, 92, .045) 0 1px, transparent 1px 15px), repeating-linear-gradient(-45deg, rgba(255, 203, 92, .045) 0 1px, transparent 1px 15px), linear-gradient(100deg, #10031c, #25093f);
  box-shadow: inset 0 0 0 2px rgba(255, 203, 92, .5), 0 14px 36px -16px rgba(150, 60, 255, .6); }
.bpx-show-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bpx-show-rays { position: absolute; left: 14%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: repeating-conic-gradient(rgba(255, 203, 92, .13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 55%); mask: radial-gradient(circle, #000 0 20%, transparent 55%); animation: hsx-spin 55s linear infinite; }
.bpx-show-bg i { position: absolute; bottom: -20px; left: calc(var(--n) * 10%); width: 14px; height: 14px; border-radius: 50%; opacity: 0; --c: #ffcb5c;
  background: radial-gradient(circle, var(--c) 0 40%, rgba(0, 0, 0, .25) 41% 44%, transparent 45%), repeating-conic-gradient(var(--c) 0 30deg, #fff 30deg 45deg);
  box-shadow: 0 0 10px var(--c); animation: hsx-chip 8s linear infinite; }
.bpx-show-bg i:nth-child(1) { --n: 1; animation-delay: -1s; } .bpx-show-bg i:nth-child(2) { --n: 2; --c: #c06bff; animation-delay: -4s; } .bpx-show-bg i:nth-child(3) { --n: 3; animation-delay: -6s; }
.bpx-show-bg i:nth-child(4) { --n: 4; --c: #3ddc84; animation-delay: -2s; } .bpx-show-bg i:nth-child(5) { --n: 5; animation-delay: -5s; } .bpx-show-bg i:nth-child(6) { --n: 6; --c: #4aa3ff; animation-delay: -7s; }
.bpx-show-bg i:nth-child(7) { --n: 7; animation-delay: -3s; } .bpx-show-bg i:nth-child(8) { --n: 8; --c: #ff2fd1; animation-delay: -.5s; } .bpx-show-bg i:nth-child(9) { --n: 9; animation-delay: -6.5s; } .bpx-show-bg i:nth-child(10) { --n: .5; --c: #c06bff; animation-delay: -2.5s; }
.bpx-show-art { position: relative; height: 230px; }
.bpx-show-ring { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; background: conic-gradient(#ffd477, #b04dff, #ff2fd1, #4aa3ff, #ffd477);
  -webkit-mask: radial-gradient(circle, transparent 0 92px, #000 93px 100px); mask: radial-gradient(circle, transparent 0 92px, #000 93px 100px); filter: drop-shadow(0 0 12px rgba(255, 203, 92, .7)); animation: hsx-spin 7s linear infinite; }
#fruit-wagers .bpx-show-art .bp-glyph { position: absolute; width: 96px; height: 96px; border: 0; background-color: transparent; font-size: 0; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px rgba(176, 77, 255, .6)); animation: hsx-bob 4.8s ease-in-out infinite; }
#fruit-wagers .bpx-show-art .a1 { left: 4%; top: 8%; } #fruit-wagers .bpx-show-art .a2 { right: 2%; top: 4%; width: 110px; height: 110px; animation-delay: -1.2s; }
#fruit-wagers .bpx-show-art .a3 { left: 8%; bottom: 2%; width: 84px; height: 84px; animation-delay: -2.4s; } #fruit-wagers .bpx-show-art .a4 { right: 8%; bottom: 0; width: 88px; height: 88px; animation-delay: -3.4s; }
.bpx-show-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 2.2rem/1 var(--display); color: #fff;
  text-shadow: 0 0 2px #ff2fd1, 0 3px 0 #6a0d6f, 0 0 18px rgba(255, 47, 209, .9), 0 0 34px rgba(255, 203, 92, .6); animation: hsx-vs 4s ease-in-out infinite; }
.bpx-show-copy { min-width: 0; }
#fruit-wagers .bpx-show-copy h3 { margin: 4px 0 6px; font: 400 clamp(1.5rem, 2.8vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 #2a0640, 0 0 22px rgba(176, 77, 255, .55); }
#fruit-wagers .bpx-show-copy h3 em { font-style: normal; color: #ffcb5c; text-shadow: 0 3px 0 #3a1200, 0 0 18px rgba(255, 203, 92, .6); }
.bpx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.bpx-steps li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .3); transition: transform .18s; }
.bpx-steps li:hover { transform: translateY(-3px); }
.bpx-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 900 .78rem/1 var(--display); color: #2a1200; background: linear-gradient(180deg, #ffe08f, #f4b942); box-shadow: 0 0 10px rgba(255, 203, 92, .6); }
.bpx-steps b { font: 800 .86rem/1.2 var(--label); color: #fff; } .bpx-steps small { font-size: 0.76rem; color: #cdb5e8; }
.bpx-show-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bpx-ladder { display: flex; flex-wrap: wrap; gap: 5px; }
.bpx-ladder i { --tc: #a7aec2; padding: 3px 8px; border-radius: 99px; font: 900 0.76rem/1.2 var(--label); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--tc) 35%, #000); border: 1px solid var(--tc); }
.bpx-ladder i[data-tier="2"] { --tc: #3ddc84; } .bpx-ladder i[data-tier="3"] { --tc: #4aa3ff; box-shadow: 0 0 9px -1px var(--tc); }
.bpx-ladder i[data-tier="4"] { --tc: #c06bff; box-shadow: 0 0 12px var(--tc); } .bpx-ladder i[data-tier="5"] { --tc: #ffcb5c; box-shadow: 0 0 14px var(--tc); animation: hsx-legend 2.6s ease-in-out infinite; }
.bpx-ghost { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 14px; text-align: center; border-radius: 18px; border: 2px dashed rgba(255, 203, 92, .6);
  background: rgba(0, 0, 0, .3); animation: hsx-invite 2.8s ease-in-out infinite; }
.bpx-ghost-tag { position: absolute; top: -11px; padding: 3px 10px; border-radius: 99px; font: 900 0.76rem/1.2 var(--label); letter-spacing: .12em; color: #2a1200; background: linear-gradient(180deg, #ffe08f, #f4b942); }
.bpx-ghost-art { display: flex; } #fruit-wagers .bpx-ghost .bp-glyph { width: 62px; height: 62px; border: 0; background-color: transparent; font-size: 0; opacity: .55; filter: grayscale(.6); }
.bpx-ghost b { font: 400 1.2rem/1 var(--display); color: #ffd982; } .bpx-ghost small { font-size: 0.76rem; color: #cdb5e8; }

/* ---- fight-poster cards ---- */
.bpx-flags { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.bpx-flag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font: 900 0.76rem/1.2 var(--label); letter-spacing: .1em; color: #fff; }
.bpx-flag .bp-ico { width: 11px; height: 11px; }
.bpx-flag.hot { background: linear-gradient(180deg, #ff9d2e, #e0480b); box-shadow: 0 0 14px rgba(255, 120, 30, .8); animation: bpx-flame 1.4s ease-in-out infinite; }
.bpx-flag.new { color: #0b2a17; background: #3ddc84; box-shadow: 0 0 12px rgba(61, 220, 132, .7); }
.bpx-flag.giant { color: #2a1200; background: linear-gradient(180deg, #ffe08f, #f4b942); box-shadow: 0 0 12px rgba(255, 203, 92, .7); }
#fruit-wagers .bp-post .bp-cardtop { margin-top: 18px; }
.bpx-ava { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; padding: 3px; background: conic-gradient(#ffcb5c, #b04dff, #ffcb5c); box-shadow: 0 0 14px rgba(255, 203, 92, .5); }
.bpx-ava[data-r="S"] { background: conic-gradient(#ff5a5a, #ffcb5c, #ff5a5a); } .bpx-ava[data-r="A"] { background: conic-gradient(#ff9d2e, #ffcb5c, #ff9d2e); }
.bpx-ava[data-r="B"] { background: conic-gradient(#ffe066, #b04dff, #ffe066); } .bpx-ava[data-r="C"] { background: conic-gradient(#3ddc84, #4aa3ff, #3ddc84); } .bpx-ava[data-r="D"] { background: conic-gradient(#a7aec2, #6c7286, #a7aec2); }
.bpx-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #1d1030; display: block; }
.bpx-fire { position: absolute; right: -8px; bottom: -4px; display: inline-flex; align-items: center; gap: 1px; padding: 1px 5px; border-radius: 99px; font: 900 0.76rem/1.3 var(--label); font-style: normal; color: #2a1200; background: linear-gradient(180deg, #ffe08f, #ff9d2e); }
.bpx-fire .bp-ico { width: 10px; height: 10px; }
.bpx-rank { padding: 1px 7px; border-radius: 6px; font: 900 0.76rem/1.3 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #1a0630; background: #a7aec2; }
.bpx-rank[data-r="S"] { background: #ff6b6b; } .bpx-rank[data-r="A"] { background: #ff9d2e; } .bpx-rank[data-r="B"] { background: #ffd24d; } .bpx-rank[data-r="C"] { background: #3ddc84; }
.bpx-elo { font: 800 0.76rem/1 var(--label); color: #ffd982; }
.bpx-vsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.76rem; color: #cdb5e8; }
.bpx-h2h { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-weight: 800; color: #fff; background: rgba(176, 77, 255, .28); box-shadow: inset 0 0 0 1px rgba(192, 107, 255, .6); }
.bpx-h2h .bp-ico { width: 12px; height: 12px; } .bpx-reqs { font-weight: 800; color: #ffd982; }

/* ---- value balance scale + deal bar ---- */
.bpx-scale { --tint: #cdb5e8; margin: 10px 0 4px; padding: 10px 12px 8px; border-radius: 16px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .25); }
.bpx-scale[data-state="even"] { --tint: #3ddc84; } .bpx-scale[data-state="fair"] { --tint: #ffcb5c; } .bpx-scale[data-state="lopsided"] { --tint: #ff6b6b; }
.bpx-scale svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; overflow: visible; }
.bpx-scale svg * { fill: none; stroke: var(--tint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.bpx-scale .bpx-pivot { fill: var(--tint); }
.bpx-scale .bpx-beam { transform-box: view-box; transform-origin: 110px 32px; transform: rotate(var(--tilt, 0deg)); transition: transform .9s cubic-bezier(.3, 1.7, .5, 1); }
.bpx-scale .bpx-pan { transform-box: view-box; transition: transform .9s cubic-bezier(.3, 1.7, .5, 1); }
.bpx-scale .bpx-pan.l { transform-origin: 26px 34px; transform: rotate(calc(var(--tilt, 0deg) * -1)); } .bpx-scale .bpx-pan.r { transform-origin: 194px 34px; transform: rotate(calc(var(--tilt, 0deg) * -1)); }
.bpx-scale .bpx-pan path:last-child { fill: color-mix(in srgb, var(--tint) 30%, transparent); }
.bpx-scalecap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.76rem; color: #cdb5e8; }
.bpx-scalecap b { font: 400 1rem/1 var(--display); color: #ffd982; } .bpx-scalecap span { flex: 1; text-align: center; font-weight: 800; color: var(--tint); }
.bpx-deal { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 16px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(16, 3, 28, .96), rgba(37, 9, 63, .96)); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .5), 0 10px 24px -12px #000; backdrop-filter: blur(6px); }
.bpx-dside { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .bpx-dside:last-of-type { justify-content: flex-end; }
.bpx-dside .bp-glyph { width: 40px; height: 40px; } .bpx-dside b { margin-left: 8px; font: 400 1.15rem/1 var(--display); color: #ffcb5c; }
.bpx-dempty { color: #9a8aae; font-size: .8rem; font-style: italic; }
.bpx-dvs { font: 400 1.4rem/1 var(--display); color: #fff; text-shadow: 0 0 14px rgba(255, 47, 209, .9); }
.bpx-stage { flex: none; padding: 4px 11px; border-radius: 99px; font: 900 0.76rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #2a1200; background: linear-gradient(180deg, #ffe08f, #f4b942); }

/* ---- agreements: ring + honored seal ---- */
.bpx-agr { position: relative; overflow: hidden; }
.bpx-ring { width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; transform: rotate(-90deg); }
.bpx-ring circle { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 4; } .bpx-ring .v { stroke: #ffcb5c; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffcb5c); transition: stroke-dasharray .8s; }
.bpx-seal { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 150px; height: 150px; border-radius: 50%; color: #2a1200;
  background: radial-gradient(circle at 35% 30%, #fff2c4, #ffcb5c 45%, #d98b17); box-shadow: 0 0 0 6px rgba(255, 203, 92, .35), 0 0 40px rgba(255, 203, 92, .8), inset 0 -6px 0 rgba(140, 60, 0, .35); animation: bpx-stamp .7s cubic-bezier(.2, 1.8, .4, 1) both; }
.bpx-seal .bp-ico { width: 52px; height: 52px; stroke-width: 2.2; } .bpx-seal b { font: 400 1.4rem/1 var(--display); letter-spacing: .06em; }
.bpx-seal.sm { position: absolute; top: 10px; right: 10px; width: 72px; height: 72px; transform: rotate(10deg); animation: none; box-shadow: 0 0 0 3px rgba(255, 203, 92, .35), 0 0 18px rgba(255, 203, 92, .6); }
.bpx-seal.sm .bp-ico { width: 26px; height: 26px; } .bpx-seal.sm b { font-size: 0.76rem; }
.bpx-agr.honored { box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .6), 0 0 30px -10px #ffcb5c; }

/* ---- full-screen moments ---- */
.bpx-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(circle, rgba(10, 3, 20, .78), rgba(0, 0, 0, .92)); animation: bpx-in .25s ease-out both; }
.bpx-overlay.out { animation: bpx-out .3s ease-in both; }
.bpx-overlay > :not(.bpx-conf) { position: relative; z-index: 2; text-align: center; color: #fff; }
.bpx-stamp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 54px; border: 5px solid #ffcb5c; border-radius: 22px; background: rgba(20, 6, 36, .9); transform: rotate(-4deg);
  box-shadow: 0 0 60px rgba(255, 203, 92, .55), inset 0 0 40px rgba(176, 77, 255, .35); animation: bpx-stamp .6s cubic-bezier(.2, 1.9, .4, 1) both; }
.bpx-stamp b { font: 400 clamp(2.2rem, 6vw, 4rem)/1 var(--display); letter-spacing: .04em; color: #ffcb5c; text-shadow: 0 4px 0 #3a1200, 0 0 30px rgba(255, 203, 92, .7); }
.bpx-stamp small { font-size: 1rem; color: #e7c4ff; } .bpx-stampic .bp-ico { width: 56px; height: 56px; color: #ffcb5c; filter: drop-shadow(0 0 14px #ffcb5c); }
.bpx-overlay.lock .bpx-stamp { border-color: #b04dff; transform: rotate(0); } .bpx-overlay.lock .bpx-stampic .bp-ico { animation: bpx-lock .7s ease-out both; }
.bpx-rays { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px; z-index: -1; background: repeating-conic-gradient(rgba(255, 203, 92, .16) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 15%, transparent 60%); mask: radial-gradient(circle, #000 0 15%, transparent 60%); animation: hsx-spin 30s linear infinite; }
.bpx-victory, .bpx-gg, .bpx-honored, .bpx-tierup { position: relative; max-width: 640px; padding: 20px; animation: bpx-stamp .7s cubic-bezier(.2, 1.7, .4, 1) both; }
.bpx-victory small, .bpx-tierup small { display: block; font: 900 .8rem/1 var(--label); letter-spacing: .3em; color: #e7c4ff; margin-bottom: 6px; }
#fruit-wagers .bpx-victory h2, #fruit-wagers .bpx-tierup h2 { margin: 0 0 14px; font: 400 clamp(3.4rem, 10vw, 7rem)/.9 var(--display); letter-spacing: .03em; color: #ffcb5c; text-shadow: 0 6px 0 #3a1200, 0 0 50px rgba(255, 203, 92, .85); }
.bpx-haul { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.bpx-haul .bp-glyph { width: 88px; height: 88px; border: 0; background-color: transparent; font-size: 0; animation: hsx-bob 3s ease-in-out infinite; filter: drop-shadow(0 10px 12px #000) drop-shadow(0 0 16px rgba(255, 203, 92, .7)); }
#fruit-wagers .bpx-gg h2 { margin: 0 0 8px; font: 400 clamp(3rem, 9vw, 6rem)/.9 var(--display); color: #e7c4ff; text-shadow: 0 5px 0 #25093f, 0 0 36px rgba(176, 77, 255, .7); }
#fruit-wagers .bpx-gg small, #fruit-wagers .bpx-gg p, #fruit-wagers .bpx-victory p, #fruit-wagers .bpx-honored p, #fruit-wagers .bpx-tierup p { color: #f0e6ff; margin: 4px 0; }
.bpx-gg small { display: block; font-size: .8rem; letter-spacing: .24em; color: #cdb5e8; }
.bpx-honored { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bpx-conf { position: absolute; z-index: 1; left: var(--x); top: -12%; width: var(--s); height: var(--s); pointer-events: none; animation: bpx-fall var(--t) linear var(--d) infinite; }
.bpx-conf .bp-glyph, .bpx-conf .bp-chipsvg { width: 100%; height: 100%; border: 0; background-color: transparent; font-size: 0; display: block; }
@keyframes bpx-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(125vh) rotate(var(--r)); opacity: .9; } }
@keyframes bpx-stamp { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bpx-lock { 0% { transform: translateY(-26px) scale(1.4); opacity: 0; } 60% { transform: translateY(2px) scale(.9); } 100% { transform: none; opacity: 1; } }
@keyframes bpx-in { from { opacity: 0; } } @keyframes bpx-out { to { opacity: 0; } }
@keyframes hsx-bob { 50% { transform: translateY(-7px) rotate(3deg); } }

/* ---- badges, rivals, leaders ---- */
.bpx-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.bpx-bdg { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); filter: grayscale(.85); opacity: .75; transition: transform .18s; }
.bpx-bdg.got { filter: none; opacity: 1; background: linear-gradient(150deg, rgba(255, 203, 92, .22), rgba(0, 0, 0, .35)); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .7), 0 0 22px -8px #ffcb5c; }
.bpx-bdg:hover { transform: translateY(-3px); }
.bpx-bico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #2a1200; background: linear-gradient(180deg, #ffe08f, #f4b942); } .bpx-bico .bp-ico { width: 22px; height: 22px; }
.bpx-bdg b { font: 800 .92rem/1.2 var(--label); } .bpx-bdg small { font-size: 0.76rem; color: #cdb5e8; }
.bpx-bbar { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; } .bpx-bbar em { display: block; height: 100%; background: linear-gradient(90deg, #ffcb5c, #ff9d2e); }
.bpx-bnum { font: 900 0.76rem/1 var(--label); letter-spacing: .1em; color: #ffd982; }
.bpx-rivals { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bpx-rivals li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .2); }
.bpx-rivals b { font: 400 1.1rem/1 var(--display); } .bpx-rivals b.up { color: #3ddc84; } .bpx-rivals b.down { color: #ff8a8a; }
.bpx-streakline { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #ffd982; } .bpx-streakline .bp-ico { color: #ff9d2e; width: 18px; height: 18px; }
.bpx-lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bpx-lp { position: relative; overflow: hidden; }
.bpx-podium { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.bpx-podium li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.bpx-podium li.gold { background: linear-gradient(100deg, rgba(255, 203, 92, .35), rgba(0, 0, 0, .3)); box-shadow: 0 0 22px -8px #ffcb5c; }
.bpx-podium li.silver { background: linear-gradient(100deg, rgba(210, 218, 232, .25), rgba(0, 0, 0, .3)); } .bpx-podium li.bronze { background: linear-gradient(100deg, rgba(227, 154, 91, .28), rgba(0, 0, 0, .3)); }
.bpx-medal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 400 1.1rem/1 var(--display); color: #2a1200; background: linear-gradient(180deg, #ffe08f, #d98b17); }
.gold .bpx-medal { box-shadow: 0 0 14px #ffcb5c; } .silver .bpx-medal { background: linear-gradient(180deg, #f2f4f8, #98a2b3); } .bronze .bpx-medal { background: linear-gradient(180deg, #f0b27a, #a0561c); }
.bpx-podium b { font-weight: 800; } .bpx-podium em { font-style: normal; font-size: .76rem; color: #ffd982; font-weight: 800; }
.bpx-more { margin: 8px 0 0; padding: 0; list-style: none; font-size: .82rem; color: #cdb5e8; } .bpx-more li { display: flex; gap: 10px; padding: 4px 6px; } .bpx-more b { margin-left: auto; color: #ffd982; }
.bpx-bigv { display: block; margin: 10px 0 4px; font: 400 clamp(2.6rem, 6vw, 4rem)/1 var(--display); color: #ffcb5c; text-shadow: 0 4px 0 #3a1200, 0 0 30px rgba(255, 203, 92, .6); }

@media (min-width: 1500px) { .bpx-show { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 200px; } }
@media (max-width: 1499px) { .bpx-ghost { display: none; } }
@media (max-width: 900px) {
  .bpx-show { grid-template-columns: 1fr; text-align: center; } .bpx-show-art { height: 190px; } .bpx-ghost { display: none; }
  .bpx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; } .bpx-show-cta { justify-content: center; }
  .bpx-deal { flex-wrap: wrap; } .bpx-stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .bpx-tktrack, .bpx-show *, .bpx-ghost, .bpx-flag, .bpx-streak, .bpx-conf, .bpx-seal, .bpx-stamp, .bpx-rays, .bpx-haul .bp-glyph, .bpx-ladder i { animation: none !important; }
  .bpx-tktrack { flex-wrap: wrap; width: auto; }
}

/* ---- card header: keep the name block tidy on narrow cards ---- */
#fruit-wagers .bp-post .bp-cardtop { align-items: flex-start; gap: 6px; }
#fruit-wagers .bp-post .bp-person { flex: 1 1 auto; min-width: 0; gap: 10px; }
#fruit-wagers .bp-post .bp-person strong { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fruit-wagers .bp-post .bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#fruit-wagers .bp-post .bp-region em { display: none; }
#fruit-wagers .bp-post .bp-region { padding: 1px 7px; }
#fruit-wagers .bp-post .bp-badge.bp-stake { flex: none; white-space: nowrap; }

/* ---- LOCKED IN, then 3-2-1 FIGHT ---- */
.bpx-fightwrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bpx-cd { position: relative; width: 320px; height: 150px; }
.bpx-cd i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font: 400 9rem/1 var(--display); font-style: normal; color: #ffcb5c; text-shadow: 0 8px 0 #3a1200, 0 0 50px rgba(255, 203, 92, .9);
  animation: bpx-cd .8s ease-out forwards; }
.bpx-cd i:nth-child(1) { animation-delay: 1s; } .bpx-cd i:nth-child(2) { animation-delay: 1.8s; } .bpx-cd i:nth-child(3) { animation-delay: 2.6s; }
.bpx-cd i.go { animation: bpx-go 1.6s cubic-bezier(.2, 1.8, .4, 1) 3.4s forwards; font-size: 6rem; color: #fff; text-shadow: 0 0 2px #ff2fd1, 0 6px 0 #6a0d6f, 0 0 40px rgba(255, 47, 209, .95), 0 0 70px rgba(255, 203, 92, .8); }
@keyframes bpx-cd { 0% { opacity: 0; transform: scale(2.4); } 25% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
@keyframes bpx-go { 0% { opacity: 0; transform: scale(3) rotate(-8deg); } 40%, 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .bpx-cd i { animation: none !important; opacity: 0; } .bpx-cd i.go { opacity: 1; } }

/* ---- polish: screen shake on big moments, calmer page floaters, card tilt ---- */
#fruit-wagers .bp-app.bpx-shake { animation: bpx-shake .6s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes bpx-shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-7px, 2px, 0); } 40%, 60% { transform: translate3d(7px, -2px, 0); } }
#fruit-wagers .bp-main { position: relative; }
#fruit-wagers .bp-float { opacity: .28; pointer-events: none; }
#fruit-wagers .bp-main > :not(.bp-float) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { #fruit-wagers .bp-app.bpx-shake { animation: none; } }

#fruit-wagers .bp-posts > .bpx-show { grid-column: 1 / -1; }
.bpx-ladder i[data-tier="6"] { --tc: #ff4d5a; box-shadow: 0 0 14px var(--tc); }
.bpx-ladder i[data-tier="1"] { --tc: #3ddc84; }

.bpx-ladder i[data-tier="1"] { --tc: #3ddc84; }
.bpx-ladder i[data-tier="2"] { --tc: #4aa3ff; }
.bpx-ladder i[data-tier="3"] { --tc: #c06bff; }
.bpx-ladder i[data-tier="4"] { --tc: #ffcb5c; }
.bpx-ladder i[data-tier="5"] { --tc: #ff4d5a; }
.bpx-ladder i[data-tier="6"] { --tc: #ff6ad5; }
.bpx-ladder i[data-tier="4"] { --tc: #ff6ad5; } .bpx-ladder i[data-tier="5"] { --tc: #ff4d5a; } .bpx-ladder i[data-tier="6"] { --tc: #ffcb5c; }
.bpx-ladder i[data-tier="4"] { --tc: #ff6ad5; } .bpx-ladder i[data-tier="5"] { --tc: #ffcb5c; }
.bpx-ladder i[data-tier="4"] { --tc: #ff4d5a; }