/* Battle casino, round two: every card is ONE colour (its value step), with a spinning foil edge, marquee bulbs, drifting suits,
   a coin-flipping chip and a clash between the two sides. The rest of the section gets the same casino air.
   Loads after wagers-battle.css. No hover movement or blur; text stays at .76rem or larger; motion stops for reduced-motion. */

@property --bc-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------------------------------------------------------------- cards: one colour each */
#fruit-wagers .bpp { --pcl: color-mix(in srgb, var(--pc) 55%, #fff); --pcd: color-mix(in srgb, var(--pc) 45%, #000); --lap: 8s;
  background:
    radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--pc) 42%, transparent), transparent 62%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--pc) 13%, transparent) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pc) 13%, transparent) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, color-mix(in srgb, var(--pc) 17%, #0a040c), color-mix(in srgb, var(--pc) 7%, #040205));
  box-shadow: inset 0 0 0 5px #05020a, inset 0 0 0 6px color-mix(in srgb, var(--pc) 55%, transparent), 0 16px 34px -16px var(--pc), 0 0 0 1px rgba(0, 0, 0, .6); }
#fruit-wagers .bpp:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 5px #05020a, inset 0 0 0 6px var(--pc), 0 20px 40px -14px var(--pc), 0 0 0 1px rgba(0, 0, 0, .6); }
/* faster, brighter foil on the rarer steps: grey, green, blue, purple, pink, red, gold */
#fruit-wagers .bpp[data-pt="0"] { --lap: 12s; } #fruit-wagers .bpp[data-pt="2"] { --lap: 9s; } #fruit-wagers .bpp[data-pt="1"] { --lap: 8s; }
#fruit-wagers .bpp[data-pt="5"] { --lap: 6s; } #fruit-wagers .bpp[data-pt="6"] { --lap: 5s; } #fruit-wagers .bpp[data-pt="3"] { --lap: 4.5s; } #fruit-wagers .bpp[data-pt="4"] { --lap: 3.5s; }

/* the foil edge: a bright band that circles the card */
#fruit-wagers .bpp.bpp::before, #fruit-wagers .bpp.bp-post[data-pt]::before { content: ""; display: block; position: absolute; inset: 0; z-index: 3; padding: 3px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--bc-ang), var(--pcd), var(--pc) 18%, var(--pcl) 30%, #fff 36%, var(--pcl) 42%, var(--pc) 55%, var(--pcd) 75%, var(--pc) 90%, var(--pcd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bc-lap var(--lap) linear infinite; }
@keyframes bc-lap { to { --bc-ang: 360deg; } }

/* marquee bulbs along the top edge, in the card's colour */
#fruit-wagers .bpp > .bpp-shine { position: absolute !important; inset: 0; z-index: 0 !important; background: none; animation: none; pointer-events: none; }
#fruit-wagers .bpp-shine::before { content: ""; position: absolute; left: 22px; right: 22px; top: 7px; height: 7px;
  background: radial-gradient(circle, #fff 0 1.5px, var(--pcl) 2.5px, transparent 3.6px) 4px 50% / 18px 7px repeat-x, radial-gradient(circle, color-mix(in srgb, var(--pc) 35%, transparent) 0 1.5px, transparent 3px) 13px 50% / 18px 7px repeat-x;
  filter: drop-shadow(0 0 3px var(--pc)); animation: bc-bulbs 1.1s steps(2, jump-none) infinite; }
@keyframes bc-bulbs { to { background-position: 22px 50%, 31px 50%; } }
/* a slow light sweep across the whole face */
#fruit-wagers .bpp-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--pcl) 38%, transparent), transparent); animation: bc-sweep 6s ease-in-out infinite; }
@keyframes bc-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* suits drifting up behind the content */
#fruit-wagers .bpp > .cz-suits { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cz-suits i { position: absolute; top: 100%; left: var(--l, 10%); font: 400 1.5rem/1 var(--display); font-style: normal; color: color-mix(in srgb, var(--pcl) 60%, transparent); opacity: 0; animation: cz-drift 9s linear infinite; }
.cz-suits i:nth-child(1) { --l: 6%; animation-delay: -1s; } .cz-suits i:nth-child(2) { --l: 22%; animation-delay: -4s; font-size: 1.1rem; } .cz-suits i:nth-child(3) { --l: 40%; animation-delay: -7s; }
.cz-suits i:nth-child(4) { --l: 58%; animation-delay: -2.5s; font-size: 1.2rem; } .cz-suits i:nth-child(5) { --l: 76%; animation-delay: -5.5s; } .cz-suits i:nth-child(6) { --l: 90%; animation-delay: -8s; font-size: 1.1rem; }
@keyframes cz-drift { 0% { translate: 0 0; opacity: 0; rotate: -12deg; } 12% { opacity: .5; } 85% { opacity: .35; } 100% { translate: 10px -520px; opacity: 0; rotate: 16deg; } }

/* stage: the same colour all the way across, with a bright seam where the two sides meet */
#fruit-wagers .bpp-stage { background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--pc) 42%, #04030a), #040208 74%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent), inset 0 10px 24px rgba(0, 0, 0, .7); }
#fruit-wagers .bpp-stage::before { border-color: color-mix(in srgb, var(--pcl) 60%, transparent); }
#fruit-wagers .bpp-stage::after { background: linear-gradient(180deg, transparent, var(--pc) 22%, #fff 50%, var(--pc) 78%, transparent); box-shadow: 0 0 10px var(--pc), 0 0 18px var(--pc); }
#fruit-wagers .bpp-side.give small::before, #fruit-wagers .bpp-side.want small::before { background: var(--pcl); box-shadow: 0 0 8px var(--pc); }
#fruit-wagers .bpp-side small { color: var(--pcl); }
#fruit-wagers .bpp-art::before, #fruit-wagers .bpp-side.want .bpp-art::before { border-color: color-mix(in srgb, var(--pc) 75%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--pc) 26%, transparent), transparent 70%); }

/* the two sides lunge at each other, and the VS medallion takes the hit */
#fruit-wagers .bpp-side.give .bpp-art { animation: bc-lunge-l 4.4s ease-in-out infinite; }
#fruit-wagers .bpp-side.want .bpp-art { animation: bc-lunge-r 4.4s ease-in-out infinite; }
@keyframes bc-lunge-l { 0%, 38%, 100% { translate: 0 0; } 46% { translate: 14px 0; } 52% { translate: 6px 0; } 66% { translate: 0 0; } }
@keyframes bc-lunge-r { 0%, 38%, 100% { translate: 0 0; } 46% { translate: -14px 0; } 52% { translate: -6px 0; } 66% { translate: 0 0; } }
#fruit-wagers .bpp-vs { position: relative; z-index: 2; background: radial-gradient(circle at 35% 28%, var(--pcl), var(--pc) 55%, var(--pcd)); color: #120818; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 2px var(--pcd), inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 16px -2px var(--pc); animation: bc-hit 4.4s ease-in-out infinite; }
#fruit-wagers .bpp-vs b { font: inherit; }
#fruit-wagers .bpp-vs::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--pcl) 0 5deg, transparent 5deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 40%, #000 42% 60%, transparent 66%); mask: radial-gradient(circle, transparent 0 40%, #000 42% 60%, transparent 66%); animation: bc-burst 4.4s ease-out infinite; }
@keyframes bc-hit { 0%, 42%, 62%, 100% { scale: 1; } 48% { scale: 1.28; } 54% { scale: 1.08; } }
@keyframes bc-burst { 0%, 44% { opacity: 0; scale: .5; } 48% { opacity: 1; scale: 1; } 62%, 100% { opacity: 0; scale: 1.5; } }

/* chips flip like coins every few seconds */
#fruit-wagers .bpp-side .bp-chip { perspective: 260px; }
#fruit-wagers .bpp-side .bp-chip > .bp-chipsvg, #fruit-wagers .bpp .bpp-side .bp-chip b { animation: bc-coin 6.5s ease-in-out infinite; }
#fruit-wagers .bpp-side.want .bp-chip > .bp-chipsvg, #fruit-wagers .bpp .bpp-side.want .bp-chip b { animation-delay: -3.2s; }
@keyframes bc-coin { 0%, 70%, 100% { transform: rotateY(0deg); } 86% { transform: rotateY(360deg); } }

/* everything else on the card takes the same colour */
#fruit-wagers .bpp-tier { background: linear-gradient(180deg, var(--pcl), var(--pc)); color: #120818; }
#fruit-wagers .bpp-name::after { background: linear-gradient(90deg, var(--pcl), var(--pc), transparent); box-shadow: 0 0 8px var(--pc); }
#fruit-wagers .bpp-note { color: var(--pcl); }
#fruit-wagers .bpp-person { background: color-mix(in srgb, var(--pc) 10%, rgba(0, 0, 0, .5)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 45%, transparent); }
#fruit-wagers .bpp-person .bpx-ava { box-shadow: 0 0 0 2px var(--pc), 0 0 0 4px #05020a, 0 0 14px color-mix(in srgb, var(--pc) 70%, transparent); }
#fruit-wagers .bpp-chips span { background: color-mix(in srgb, var(--pc) 13%, rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent); }
#fruit-wagers .bpp .bp-actions .bp-button.bp-primary { color: #120818; background: linear-gradient(180deg, var(--pcl), var(--pc) 55%, var(--pcd));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 0 2px color-mix(in srgb, var(--pc) 35%, #000), 0 8px 18px -6px var(--pc); }
#fruit-wagers .bpp .bp-actions .bp-button.bp-primary::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); }

/* filter chips: the one you picked spins */
#fruit-wagers .bpd-t[aria-pressed="true"] .cz-fchip { animation: bc-chipspin 8s linear infinite; }
#fruit-wagers .bpd-t.has[aria-pressed="true"] .cz-fchip { animation: cz-chip 2.6s ease-in-out infinite, bc-chipspin 8s linear infinite; }
@keyframes bc-chipspin { to { rotate: 360deg; } }

/* ---------------------------------------------------------------- the rest of the section */
#fruit-wagers .bp-main { position: relative; isolation: isolate; }
#fruit-wagers .bc-air { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
#fruit-wagers .bc-air i { position: absolute; top: 100%; left: var(--l, 5%); font: 400 2.1rem/1 var(--display); font-style: normal; color: rgba(255, 203, 92, .2); opacity: 0; animation: bc-float 20s linear infinite; }
#fruit-wagers .bc-air i:nth-of-type(even) { color: rgba(255, 90, 105, .2); }
#fruit-wagers .bc-air em { position: absolute; top: 100%; left: var(--l, 5%); width: 46px; height: 46px; opacity: 0; animation: bc-float 26s linear infinite; }
#fruit-wagers .bc-air em .bp-chipsvg { width: 100%; height: 100%; }
#fruit-wagers .bc-air i:nth-child(1) { --l: 3%; animation-delay: -2s; } #fruit-wagers .bc-air i:nth-child(2) { --l: 12%; animation-delay: -9s; font-size: 1.5rem; }
#fruit-wagers .bc-air i:nth-child(3) { --l: 24%; animation-delay: -14s; } #fruit-wagers .bc-air i:nth-child(4) { --l: 36%; animation-delay: -5s; font-size: 1.7rem; }
#fruit-wagers .bc-air i:nth-child(5) { --l: 48%; animation-delay: -17s; } #fruit-wagers .bc-air i:nth-child(6) { --l: 60%; animation-delay: -11s; font-size: 1.4rem; }
#fruit-wagers .bc-air i:nth-child(7) { --l: 72%; animation-delay: -7s; } #fruit-wagers .bc-air i:nth-child(8) { --l: 83%; animation-delay: -19s; font-size: 1.6rem; }
#fruit-wagers .bc-air i:nth-child(9) { --l: 92%; animation-delay: -3s; } #fruit-wagers .bc-air i:nth-child(10) { --l: 30%; animation-delay: -12s; font-size: 1.3rem; }
#fruit-wagers .bc-air em:nth-of-type(1) { --l: 8%; animation-delay: -6s; } #fruit-wagers .bc-air em:nth-of-type(2) { --l: 28%; animation-delay: -16s; width: 36px; height: 36px; }
#fruit-wagers .bc-air em:nth-of-type(3) { --l: 52%; animation-delay: -10s; } #fruit-wagers .bc-air em:nth-of-type(4) { --l: 68%; animation-delay: -22s; width: 38px; height: 38px; }
#fruit-wagers .bc-air em:nth-of-type(5) { --l: 80%; animation-delay: -1s; } #fruit-wagers .bc-air em:nth-of-type(6) { --l: 95%; animation-delay: -13s; width: 34px; height: 34px; }
@keyframes bc-float { 0% { translate: 0 0; opacity: 0; rotate: -10deg; } 8% { opacity: .85; } 88% { opacity: .85; } 100% { translate: 40px -112cqh; opacity: 0; rotate: 220deg; } }

/* plaques: four gold studs in the corners and a slow gold breathing glow; headings flanked by suits */
#fruit-wagers .bp-post:not(.bpp), #fruit-wagers .bp-panel, #fruit-wagers .bp-request, #fruit-wagers .bp-success {
  background:
    radial-gradient(circle, #ffe9a8 0 2px, #ffcb5c 3px, transparent 4px) left 7px top 7px / 12px 12px no-repeat,
    radial-gradient(circle, #ffe9a8 0 2px, #ffcb5c 3px, transparent 4px) right 7px top 7px / 12px 12px no-repeat,
    radial-gradient(circle, #ffe9a8 0 2px, #ffcb5c 3px, transparent 4px) left 7px bottom 7px / 12px 12px no-repeat,
    radial-gradient(circle, #ffe9a8 0 2px, #ffcb5c 3px, transparent 4px) right 7px bottom 7px / 12px 12px no-repeat,
    radial-gradient(ellipse at 50% -20%, rgba(160, 80, 240, .2), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 203, 92, .03) 0 2px, transparent 2px 16px),
    linear-gradient(280deg, #07030d, #1a0c30 78%);
  animation: bc-breathe 6s ease-in-out infinite alternate; }
@keyframes bc-breathe { from { box-shadow: inset 0 0 0 3px #08030a, inset 0 0 0 4px rgba(255, 203, 92, .35), 0 12px 26px -14px #000, 0 0 14px -12px rgba(255, 203, 92, .4); }
                        to   { box-shadow: inset 0 0 0 3px #08030a, inset 0 0 0 4px rgba(255, 203, 92, .6), 0 12px 26px -14px #000, 0 0 28px -8px rgba(255, 203, 92, .75); } }
#fruit-wagers .bp-toprow h2::before { content: "\2660\00a0"; color: #e9e2ff; text-shadow: 0 0 14px #e9e2ff; animation: cz-suit 3.2s ease-in-out infinite; }
#fruit-wagers .bp-toprow h2 { text-transform: uppercase; letter-spacing: .06em; }
#fruit-wagers .bp-eyebrow::before { content: "\2666\00a0"; color: #c79bff; text-shadow: 0 0 10px #b04dff; }
#fruit-wagers .bp-toprow h2::after { background: linear-gradient(90deg, #ffcb5c, #fff2b0, #ffcb5c, transparent); background-size: 200% 100%; animation: bc-trim 5s linear infinite; }

/* steps are chips */
#fruit-wagers .bp-step b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #2a1200; background: radial-gradient(circle at 35% 30%, #fff0b8, #ffc23a 60%, #b8780a); box-shadow: inset 0 0 0 2px #7a4a00, 0 0 0 2px rgba(255, 203, 92, .45); }
#fruit-wagers .bp-step.active b { animation: bc-coinpulse 2.2s ease-in-out infinite; }
@keyframes bc-coinpulse { 50% { box-shadow: inset 0 0 0 2px #7a4a00, 0 0 0 5px rgba(255, 203, 92, .25), 0 0 16px #ffcb5c; } }

/* hero readouts: a glint runs across each one */
#fruit-wagers .hsx-stat { background: linear-gradient(110deg, transparent 42%, rgba(255, 235, 170, .24) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat, linear-gradient(180deg, #0b0414, #1a0a2e); animation: bc-glint 5.5s ease-in-out infinite; }
#fruit-wagers .hsx-stat:nth-child(2) { animation-delay: .5s; } #fruit-wagers .hsx-stat:nth-child(3) { animation-delay: 1s; } #fruit-wagers .hsx-stat:nth-child(4) { animation-delay: 1.5s; }
@keyframes bc-glint { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -70% 0, 0 0; } }

@media (max-width: 700px) { #fruit-wagers .bc-air em { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #fruit-wagers .bpp::before, #fruit-wagers .bpp-shine::before, #fruit-wagers .bpp-shine::after, .cz-suits i, #fruit-wagers .bpp-art, #fruit-wagers .bpp-vs, #fruit-wagers .bpp-vs::before,
  #fruit-wagers .bpp-side .bp-chip > .bp-chipsvg, #fruit-wagers .bpp .bpp-side .bp-chip b, #fruit-wagers .bpd-t .cz-fchip, #fruit-wagers .bc-air i, #fruit-wagers .bc-air em,
  #fruit-wagers .bp-post:not(.bpp), #fruit-wagers .bp-panel, #fruit-wagers .bp-request, #fruit-wagers .bp-success, #fruit-wagers .bp-step.active b, #fruit-wagers .hsx-stat,
  #fruit-wagers .bp-toprow h2::before, #fruit-wagers .bp-toprow h2::after { animation: none; }
}

/* the deal bar follows the battle palette */
#fruit-wagers .bpx-deal, .bpx-deal { background: linear-gradient(90deg, #2a1250, #120720 50%, #2a1250); box-shadow: inset 0 0 0 1.5px rgba(255, 203, 92, .6), 0 10px 22px -12px #000; }