/* Open wagers, casino style: a marquee sign with chasing bulbs, poker-chip filters, and playing-card posts on a felt table.
   No hover movement or blur anywhere; every text stays at .76rem or larger. Motion switches off under reduced-motion. */

/* ---------- the table: felt, card-back lattice, gold trim, marquee bulbs ---------- */
#fruit-wagers .bpd { --gold: #ffcb5c; --gold2: #ffe9a8; gap: 16px; padding: 26px 20px 20px; border-radius: 22px;
  box-shadow: inset 0 0 0 2px #8a5a12, inset 0 0 0 4px #1b0d05, inset 0 0 0 5px rgba(255, 203, 92, .65), 0 24px 50px -22px #000, 0 0 40px -14px rgba(255, 203, 92, .5); }
#fruit-wagers .bpd::after { inset: 6px; border-radius: 17px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 203, 92, .2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 16px),
    linear-gradient(165deg, #2b1050, #130826 55%, #07030f); }
#fruit-wagers .bpd::before { content: ""; position: absolute; z-index: 2; left: 18px; right: 18px; top: 8px; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff6d0 0 2px, #ffcb5c 3px, transparent 4.5px) 5px 50% / 22px 10px repeat-x,
              radial-gradient(circle, rgba(255, 203, 92, .28) 0 2px, transparent 3.5px) 16px 50% / 22px 10px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 203, 92, .9)); animation: cz-chase 1.3s steps(2, jump-none) infinite; }
@keyframes cz-chase { to { background-position: 27px 50%, 38px 50%; } }
#fruit-wagers .bpd-glow { opacity: .55; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 203, 92, .55), transparent 72%, rgba(255, 233, 168, .35), transparent 90%); }

/* sign */
#fruit-wagers .bpd-head h2 { position: relative; gap: 14px; font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold2); text-shadow: 0 2px 0 #7a3d00, 0 4px 0 #3a1a00, 0 0 24px rgba(255, 203, 92, .7); }
#fruit-wagers .bpd-head h2::before, #fruit-wagers .bpd-head h2::after { font: 400 1.5rem/1 var(--display); text-shadow: 0 0 14px currentColor; animation: cz-suit 3.2s ease-in-out infinite; }
#fruit-wagers .bpd-head h2::before { content: "\2660"; color: #e9e2ff; }
#fruit-wagers .bpd-head h2::after { content: "\2666"; color: #ff4d5a; animation-delay: -1.6s; order: 3; }
@keyframes cz-suit { 50% { opacity: .55; } }
#fruit-wagers .bpd-live { order: 2; padding: 5px 12px; font-size: .8rem; letter-spacing: .12em; color: #fff; background: linear-gradient(180deg, #ff5b6b, #c2182b); text-shadow: 0 1px 0 #5a0710; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 0 18px rgba(255, 60, 80, .85); }
#fruit-wagers .bpd-live i { background: #fff; box-shadow: 0 0 8px #fff; }

/* ---------- filters become poker chips ---------- */
#fruit-wagers .bpd-tiers { gap: 12px; padding: 4px 0; }
#fruit-wagers .bpd-t { position: relative; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 99px; font-size: .88rem; letter-spacing: .05em;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .78)), color-mix(in srgb, var(--tc) 18%, #0a0412);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, #000), inset 0 2px 0 rgba(255, 255, 255, .12), 0 6px 14px -8px #000; }
#fruit-wagers .bpd-t .cz-fchip { flex: none; width: 36px; height: 36px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 7px color-mix(in srgb, var(--tc) 55%, transparent)); }
#fruit-wagers .bpd-t .cz-fchip.all { --k1: #14081f; --k2: #ffd45a; --k3: #1d0c2e; --k4: #ffd45a; --k5: #ffd45a; --k6: #14081f; }
#fruit-wagers .bpd-t.has .cz-fchip { animation: cz-chip 2.6s ease-in-out infinite; }
@keyframes cz-chip { 50% { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px var(--tc)); } }
#fruit-wagers .bpd-t em { min-width: 24px; padding: 3px 7px; font-weight: 900; color: #1a0a00; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
#fruit-wagers .bpd-t:hover { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .6)), color-mix(in srgb, var(--tc) 28%, #0a0412); box-shadow: inset 0 0 0 2px var(--tc), 0 0 20px -4px var(--tc); }
#fruit-wagers .bpd-t[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), color-mix(in srgb, var(--tc) 40%, #0a0412);
  box-shadow: inset 0 0 0 2px var(--tc), inset 0 0 0 4px rgba(0, 0, 0, .55), 0 0 26px -2px var(--tc); }
#fruit-wagers .bpd-t[aria-pressed="true"]::after { content: "\25C6"; position: absolute; top: -9px; left: 50%; translate: -50% 0; font-size: .8rem; line-height: 1; color: var(--tc); text-shadow: 0 0 8px var(--tc); }

/* search and regions: felt inset and brass switches */
#fruit-wagers .bpd-tools .bp-search { background: rgba(0, 0, 0, .45); border-radius: 14px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 203, 92, .5); }
#fruit-wagers .bpd-reg { padding: 5px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 203, 92, .4); }
#fruit-wagers .bpd-reg button[aria-pressed="true"] { color: #2a1200; background: linear-gradient(180deg, #fff0b8, #ffc23a 55%, #d98f0c); box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(255, 203, 92, .7); }

/* ---------- posts are playing cards ---------- */
#fruit-wagers .bp-posts { gap: 20px; }
#fruit-wagers .bpp { gap: 12px; padding: 16px; border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pc) 34%, transparent), transparent 62%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--pc) 9%, transparent) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pc) 9%, transparent) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #1c0e2e, #0a0512);
  box-shadow: inset 0 0 0 2px var(--pc), inset 0 0 0 5px #08030f, inset 0 0 0 6px color-mix(in srgb, var(--pc) 50%, transparent), 0 18px 34px -18px var(--pc), 0 0 0 1px rgba(0, 0, 0, .6); }
#fruit-wagers .bpp:hover { filter: brightness(1.1); box-shadow: inset 0 0 0 2px var(--pc), inset 0 0 0 5px #08030f, inset 0 0 0 6px var(--pc), 0 20px 40px -14px var(--pc); }

/* rank tab, like the index in a card's corner */
#fruit-wagers .bpp-ribbon { gap: 10px; justify-content: flex-start; }
#fruit-wagers .bpp-ribbon .bpx-flags { margin-left: auto; }
#fruit-wagers .cz-rank { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 34px; padding: 3px 0 2px; border-radius: 8px; line-height: 1; color: var(--pc); background: #fff9ea; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 70%, #000), 0 3px 8px -2px #000; }
#fruit-wagers .cz-rank b { font: 400 1.3rem/1 var(--display); color: #1a0f26; text-shadow: none; }
#fruit-wagers .cz-rank i { font-style: normal; font-size: 1.05rem; line-height: 1; color: color-mix(in srgb, var(--pc) 75%, #000); }
#fruit-wagers .bpp-tier { padding: 6px 13px; font-size: .8rem; letter-spacing: .12em; color: #170a22; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px -2px var(--pc); }

/* neon flags */
#fruit-wagers .bpx-flag { text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
#fruit-wagers .bpx-flag.giant { animation: cz-neon 2.4s ease-in-out infinite; }
@keyframes cz-neon { 50% { box-shadow: 0 0 22px rgba(255, 203, 92, 1); } }

/* the felt: a betting line with a circle under each side */
#fruit-wagers .bpp-stage { position: relative; padding: 14px 8px 12px; border-radius: 22px; isolation: isolate;
  background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--pc) 34%, #04120a), #050310 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 8px 22px rgba(0, 0, 0, .65); }
#fruit-wagers .bpp-stage::before { content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--gold, #ffcb5c) 55%, transparent); pointer-events: none; }
#fruit-wagers .bpp-art { position: relative; min-height: 92px; }
#fruit-wagers .bpp-art::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; width: 104px; height: 104px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--pc) 65%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%); animation: cz-spin 36s linear infinite; }
#fruit-wagers .bpp-art .bp-glyph, #fruit-wagers .bpp-art .bp-plus, #fruit-wagers .bpp-art .bpp-any { position: relative; z-index: 1; }
@keyframes cz-spin { to { rotate: 360deg; } }
#fruit-wagers .bpp-side small { font-size: .78rem; letter-spacing: .18em; color: var(--gold2, #ffe9a8); text-shadow: 0 1px 0 #000; }

/* chips under each side's art, and the face-down card for open offers */
#fruit-wagers .bpp-side .bp-chip { --cs: 62px; margin-top: 2px; animation: cz-bob 3.8s ease-in-out infinite; }
#fruit-wagers .bpp-side.want .bp-chip { animation-delay: -1.9s; }
@keyframes cz-bob { 50% { translate: 0 -4px; } }
#fruit-wagers .cz-anyoffer { font: 400 1rem/1 var(--display); letter-spacing: .08em; color: var(--gold2); text-shadow: 0 2px 0 #4a2300; }
#fruit-wagers .bpp-any { width: 52px; height: 74px; border-radius: 9px; border: 2px solid #ffe9a8; animation: none; rotate: -5deg;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px), linear-gradient(160deg, #8b1b3d, #3a0a24);
  box-shadow: inset 0 0 0 3px #3a0a24, inset 0 0 0 4px rgba(255, 233, 168, .6), 0 8px 14px -4px #000, 0 0 18px -4px rgba(255, 70, 120, .8); }
#fruit-wagers .bpp-any i { font: 400 1.9rem/1 var(--display); font-style: normal; color: #ffe9a8; text-shadow: 0 2px 0 #000, 0 0 12px #ffcb5c; animation: cz-suit 2.4s ease-in-out infinite; }

/* VS medallion */
#fruit-wagers .bpp-vs { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 400 1.05rem/1 var(--display); letter-spacing: .04em; color: #2a1200; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  background: radial-gradient(circle at 35% 28%, #fff6d0, #ffc23a 55%, #b8780a); box-shadow: inset 0 0 0 2px #7a4a00, inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 0 0 rgba(255, 203, 92, .7); animation: cz-medal 2.4s ease-out infinite; }
@keyframes cz-medal { 70%, 100% { box-shadow: inset 0 0 0 2px #7a4a00, inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 0 12px rgba(255, 203, 92, 0); } }

/* name, player seat, chips */
#fruit-wagers .bpp-name { position: relative; padding-bottom: 8px; font-size: 1.2rem; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
#fruit-wagers .bpp-name::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--pc), transparent); }
#fruit-wagers .bpp-note { color: var(--gold2); }
#fruit-wagers .bpp-person { padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .22); }
#fruit-wagers .bpp-person .bpx-ava { box-shadow: 0 0 0 2px #ffcb5c, 0 0 0 4px #1b0d05, 0 0 14px rgba(255, 203, 92, .55); }
#fruit-wagers .bpp-chips span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* brass action button */
#fruit-wagers .bpp .bp-actions .bp-button.bp-primary { position: relative; overflow: hidden; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #2a1200; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #fff0b8, #ffc23a 52%, #c9830a); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(120, 60, 0, .45), 0 0 0 2px #4a2a00, 0 8px 16px -6px var(--pc); }
#fruit-wagers .bpp .bp-actions .bp-button.bp-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: cz-glint 4.6s ease-in-out infinite; }
@keyframes cz-glint { 0%, 55% { left: -50%; } 100% { left: 130%; } }

/* the first render deals the cards in */
@media (prefers-reduced-motion: no-preference) {
  #fruit-wagers .cz-deal > .bpp { animation: cz-deal .7s cubic-bezier(.2, 1.2, .35, 1) both; }
  #fruit-wagers .cz-deal > .bpp:nth-child(2) { animation-delay: .1s; } #fruit-wagers .cz-deal > .bpp:nth-child(3) { animation-delay: .2s; }
  #fruit-wagers .cz-deal > .bpp:nth-child(4) { animation-delay: .3s; } #fruit-wagers .cz-deal > .bpp:nth-child(n+5) { animation-delay: .4s; }
}
@keyframes cz-deal { from { opacity: 0; translate: -46px -34px; rotate: -7deg; scale: .88; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }

@media (max-width: 700px) {
  #fruit-wagers .bpd { padding: 24px 12px 14px; } #fruit-wagers .bpd-head h2 { font-size: 1.5rem; }
  #fruit-wagers .bpd-t { padding: 5px 11px 5px 6px; } #fruit-wagers .bpd-t .cz-fchip { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  #fruit-wagers .bpd::before, #fruit-wagers .bpd-head h2::before, #fruit-wagers .bpd-head h2::after, #fruit-wagers .bpd-t.has .cz-fchip, #fruit-wagers .bpp-art::before,
  #fruit-wagers .bpp-side .bp-chip, #fruit-wagers .bpp-any i, #fruit-wagers .bpp-vs, #fruit-wagers .bpx-flag.giant, #fruit-wagers .bpp .bp-actions .bp-button.bp-primary::after { animation: none; }
}

/* the chip's own number keeps the chip's colours (the side label rules above would otherwise tint it) */
#fruit-wagers .bpp .bpp-side .bp-chip b { color: var(--k4); font: 400 calc(var(--cs) * var(--f, .24))/1 var(--bp-font, var(--display)); letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--k6), 0 -1.5px 0 var(--k6), 1.5px 0 0 var(--k6), -1.5px 0 0 var(--k6), 1.5px 1.5px 0 var(--k6), -1.5px -1.5px 0 var(--k6), 1.5px -1.5px 0 var(--k6), -1.5px 1.5px 0 var(--k6); }