/* The wager side of BloxComp is a sister site: the same bones, dressed as a private high-roller room.
   Premium means restraint: antique gold instead of yellow, deep velvet instead of black, slow motion, small sparkles.
   Nothing here moves on hover; every animation is slow and stops under reduced-motion. Text stays at .76rem or larger. */

html[data-theme]:not([data-theme="white"]):has(body.page-wagers) {
  --bg: #09040f; --bg-2: #120720; --hot: #e8b44a; --hot-rgb: 232, 180, 74; --hot-text: #ffe3a1; --rim: #9a6a1c; --live: #e8b44a;
}

/* ------------------------------------------------------------------ the backdrop (built by fruit-wagers.js) */
.bc-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #08040f; }
.shell { z-index: 1; }
.bc-carpet { position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% -8%, rgba(112, 52, 196, .36), transparent 70%),
    radial-gradient(55% 45% at 100% 100%, rgba(70, 30, 140, .34), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(90, 40, 170, .26), transparent 70%),
    repeating-linear-gradient(60deg, rgba(232, 180, 74, .04) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-60deg, rgba(232, 180, 74, .04) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, #0c0617, #07030d); }
.bc-pool { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; }
.bc-pool.a { left: -20vmax; top: -10vmax; background: radial-gradient(circle, rgba(232, 180, 74, .16), transparent 62%); animation: bc-drift-a 46s ease-in-out infinite alternate; }
.bc-pool.b { right: -24vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(150, 70, 240, .18), transparent 62%); animation: bc-drift-b 58s ease-in-out infinite alternate; }
@keyframes bc-drift-a { to { translate: 18vmax 12vmax; } }
@keyframes bc-drift-b { to { translate: -16vmax -10vmax; } }
/* two soft spotlights, swaying */
.bc-beam { position: absolute; top: -20vh; width: 60vw; height: 120vh; opacity: .6; transform-origin: 50% 0; }
.bc-beam.l { left: -8vw; background: linear-gradient(180deg, rgba(255, 214, 140, .09), transparent 70%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: bc-sway-l 16s ease-in-out infinite alternate; }
.bc-beam.r { right: -8vw; background: linear-gradient(180deg, rgba(196, 150, 255, .08), transparent 70%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: bc-sway-r 19s ease-in-out infinite alternate; }
@keyframes bc-sway-l { from { rotate: -10deg; } to { rotate: 6deg; } }
@keyframes bc-sway-r { from { rotate: 8deg; } to { rotate: -8deg; } }
/* icons: sparse, slow, faint */
.bc-ic { position: absolute; top: 106%; left: var(--l); width: var(--s); height: var(--s); display: grid; place-items: center; opacity: 0; color: rgba(232, 180, 74, .6); font: 400 var(--s)/1 var(--display);
  animation: bc-up var(--t) linear infinite; animation-delay: var(--dl); }
.bc-ic img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.85) drop-shadow(0 0 12px rgba(232, 180, 74, .4)); }
.bc-ic svg { width: 100%; height: 100%; }
.bc-ic.k-f { --o: .26; } .bc-ic.k-c { --o: .2; } .bc-ic.k-i { --o: .18; } .bc-ic.k-s { --o: .18; color: rgba(245, 235, 255, .7); } .bc-ic.k-d { --o: .17; }
.bc-ic.k-s:nth-child(3n) { color: rgba(200, 150, 255, .8); }
@keyframes bc-up { 0% { translate: 0 0; opacity: 0; rotate: 0deg; } 8% { opacity: var(--o, .14); } 90% { opacity: var(--o, .14); } 100% { translate: var(--x) -122vh; rotate: var(--r); opacity: 0; } }
/* tiny twinkles, two layers out of step */
.bc-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 52%, rgba(0, 0, 0, .55)); }
.bc-vig::before, .bc-vig::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff3cf; animation: bc-twinkle 6s ease-in-out infinite alternate; }
.bc-vig::before { box-shadow: 8vw 12vh 0 #fff3cf, 23vw 71vh 0 #ffe3a1, 37vw 28vh 0 #fff, 52vw 83vh 0 #ffe3a1, 66vw 17vh 0 #fff3cf, 81vw 58vh 0 #fff, 93vw 36vh 0 #ffe3a1, 14vw 44vh 0 #fff, 47vw 9vh 0 #ffe3a1; }
.bc-vig::after { box-shadow: 4vw 64vh 0 #ffe3a1, 19vw 22vh 0 #fff, 33vw 91vh 0 #fff3cf, 58vw 47vh 0 #ffe3a1, 72vw 79vh 0 #fff, 88vw 11vh 0 #fff3cf, 96vw 88vh 0 #ffe3a1, 42vw 62vh 0 #fff; animation-delay: -3s; animation-duration: 8s; }
@keyframes bc-twinkle { from { opacity: .08; } to { opacity: .85; } }

/* the app and its panels let the backdrop show through */
#fruit-wagers .bp-app { background: rgba(5, 2, 6, .16); }
#fruit-wagers .bp-app::before { display: none; }
#fruit-wagers .bp-main { background: transparent; }
#fruit-wagers .bc-air { display: none; }
#fruit-wagers .bp-top { background: linear-gradient(180deg, rgba(36, 16, 66, .86), rgba(12, 6, 22, .78)); }
#fruit-wagers .bp-bottom { background: rgba(8, 3, 6, .5); }

/* ------------------------------------------------------------------ the logo: BloxComp in gold leaf, with a WAGERS plate */
body.page-wagers .logo { position: relative; }
body.page-wagers .logo-img { filter: url(#bc-gold) drop-shadow(0 3px 0 #3a1a00) drop-shadow(0 0 12px rgba(232, 180, 74, .3)); animation: bc-logo-glow 7s ease-in-out infinite alternate; }
@keyframes bc-logo-glow {
  from { filter: url(#bc-gold) drop-shadow(0 3px 0 #3a1a00) drop-shadow(0 0 8px rgba(232, 180, 74, .2)); }
  to   { filter: url(#bc-gold) drop-shadow(0 3px 0 #3a1a00) drop-shadow(0 0 22px rgba(232, 180, 74, .55)); } }
body.page-wagers .logo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/static/img/logo-custom.png) center 40% / cover no-repeat; mask: url(/static/img/logo-custom.png) center 40% / cover no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) -160% 0 / 250% 100% no-repeat; mix-blend-mode: soft-light; animation: bc-sheen 8s ease-in-out infinite; }
@keyframes bc-sheen { 0%, 62% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
body.page-wagers .logo::after { content: "\25C6\00a0\00a0WAGERS\00a0\00a0\25C6"; position: absolute; left: 50%; bottom: 3px; translate: -50% 0; padding: 3px 24px 4px; border-radius: 5px;
  font: 400 .95rem/1 var(--display); letter-spacing: .42em; text-indent: .42em; color: #2a1400; background: linear-gradient(180deg, #fff0c4, #e8b44a 52%, #a8721c);
  box-shadow: 0 0 0 1px #4a2a00, 0 0 0 3px rgba(232, 180, 74, .3), 0 8px 16px -4px rgba(0, 0, 0, .8); white-space: nowrap; }

/* header plate: what is on the table right now */
.bc-jackpot { grid-column: 1; justify-self: start; align-self: center; position: relative; overflow: hidden; display: grid; gap: 4px; min-width: 176px; padding: 10px 16px 11px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(38, 18, 70, .92), rgba(10, 5, 20, .92)); box-shadow: inset 0 0 0 1px rgba(232, 180, 74, .6), inset 0 0 0 4px rgba(0, 0, 0, .55), 0 12px 26px -12px #000; }
.bc-jp-l { display: flex; align-items: center; gap: 8px; font: 800 .76rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: #e8b44a; }
.bc-jp-l i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a69; box-shadow: 0 0 8px #ff5a69; animation: bc-pulse 2.4s ease-in-out infinite; }
@keyframes bc-pulse { 50% { opacity: .35; } }
.bc-jp-v { font: 400 1.9rem/1 var(--display); letter-spacing: .05em; background: linear-gradient(180deg, #fff5d2, #e8b44a 58%, #b47a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a1a00); }
.bc-jp-s { font: 700 .78rem/1 var(--label); letter-spacing: .06em; color: #c2a98c; }
.bc-jackpot::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 233, 168, .2), transparent); animation: bc-glide 7s ease-in-out infinite; }
@keyframes bc-glide { 0%, 60% { left: -50%; } 100% { left: 130%; } }
.bc-jackpot.bump .bc-jp-v { animation: bc-bump 1.1s ease-out; }
@keyframes bc-bump { 0% { filter: drop-shadow(0 2px 0 #3a1a00) brightness(1); } 30% { filter: drop-shadow(0 2px 0 #3a1a00) brightness(1.7) drop-shadow(0 0 12px #ffcb5c); } 100% { filter: drop-shadow(0 2px 0 #3a1a00) brightness(1); } }
@media (max-width: 1100px) { .bc-jackpot { display: none; } }

/* bulbs along the bottom of the header */
body.page-wagers .topbar { position: relative; }
body.page-wagers .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 7px; pointer-events: none; opacity: .75;
  background: radial-gradient(circle, #fff3cf 0 1.4px, #e8b44a 2.4px, transparent 3.4px) 4px 50% / 24px 7px repeat-x, radial-gradient(circle, rgba(232, 180, 74, .25) 0 1.4px, transparent 3px) 16px 50% / 24px 7px repeat-x;
  filter: drop-shadow(0 0 3px rgba(232, 180, 74, .7)); animation: bc-bulbs-hdr 1.6s steps(2, jump-none) infinite; }
@keyframes bc-bulbs-hdr { to { background-position: 28px 50%, 40px 50%; } }

/* ------------------------------------------------------------------ the rest of the BloxComp chrome, dressed for this room */
body.page-wagers .nav-group { color: #e8b44a; letter-spacing: .24em; }
body.page-wagers .nav-group::before { content: "\2666\00a0"; color: #c79bff; }
body.page-wagers .box.stat b, body.page-wagers .stat b { background: linear-gradient(180deg, #fff5d2, #e8b44a 60%, #b47a1c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #3a1a00); }
body.page-wagers .sidebar .box { box-shadow: 0 0 22px -14px rgba(232, 180, 74, .8); }
body.page-wagers .theme-picker { opacity: .85; }

/* wager hub */
#wager-rail .wr-hub h2 { font: 400 1.3rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffe3a1; text-shadow: 0 2px 0 #5a3000, 0 0 16px rgba(232, 180, 74, .4); }
#wager-rail .wr-item { position: relative; overflow: hidden; }
#wager-rail .wr-item[aria-current="page"], #wager-rail .wr-item.primary { box-shadow: inset 0 0 0 1px rgba(255, 233, 168, .6), 0 0 16px -6px #e8b44a; }
#wager-rail .wr-item[aria-current="page"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: bc-glide 5.5s ease-in-out infinite; }
#wager-rail .wr-streak { animation: bc-pulse 3s ease-in-out infinite; }
#wager-rail .wr-bar u { background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%); background-size: 220% 100%; animation: bc-bar 4s linear infinite; }
@keyframes bc-bar { to { background-position: -220% 0; } }

/* ------------------------------------------------------------------ small, rich things on every page of the section */
/* headings: gold leaf with a slow shimmer */
#fruit-wagers .bp-toprow h2, #fruit-wagers .bpd-head h2 { color: transparent; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 #4a2400);
  background-image: linear-gradient(100deg, #e8b44a 0%, #ffe9b0 22%, #e8b44a 40%, #c88a22 100%), linear-gradient(#e8b44a, #e8b44a); background-size: 250% 100%, 100% 100%; animation: bc-leaf 9s ease-in-out infinite alternate; }
@keyframes bc-leaf { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }
#fruit-wagers .bpd-head h2::before, #fruit-wagers .bpd-head h2::after, #fruit-wagers .bp-toprow h2::before { -webkit-text-fill-color: initial; }
/* tabs: the current one has a slow underglow, the icons shimmer in turn */
#fruit-wagers .bp-tabs button[aria-current="page"] { animation: bc-tab 4.5s ease-in-out infinite; }
@keyframes bc-tab { 50% { box-shadow: 0 -6px 26px -4px rgba(255, 214, 120, .95), inset 0 1px 0 #fff, 0 0 0 1px #4a2a00; } }
#fruit-wagers .bp-tabs button:not([aria-current="page"]) .bp-ico { animation: bc-ico 9s ease-in-out infinite; }
#fruit-wagers .bp-tabs button:nth-child(2) .bp-ico { animation-delay: 1s; } #fruit-wagers .bp-tabs button:nth-child(3) .bp-ico { animation-delay: 2s; } #fruit-wagers .bp-tabs button:nth-child(4) .bp-ico { animation-delay: 3s; }
#fruit-wagers .bp-tabs button:nth-child(5) .bp-ico { animation-delay: 4s; } #fruit-wagers .bp-tabs button:nth-child(6) .bp-ico { animation-delay: 5s; } #fruit-wagers .bp-tabs button:nth-child(7) .bp-ico { animation-delay: 6s; }
@keyframes bc-ico { 0%, 88%, 100% { color: inherit; filter: none; } 94% { color: #ffe3a1; filter: drop-shadow(0 0 6px #e8b44a); } }
/* the main call to action breathes a gold ring every few seconds */
#fruit-wagers .hsx-go, #fruit-wagers .hsx-btn.hsx-go { animation: bc-ring 5s ease-out infinite; }
@keyframes bc-ring { 0% { box-shadow: 0 0 0 0 rgba(232, 180, 74, .55); } 40%, 100% { box-shadow: 0 0 0 14px rgba(232, 180, 74, 0); } }
/* ticker belt and live feed pick up the same gold */
#fruit-wagers .bp-trustbar { background: linear-gradient(90deg, rgba(38, 18, 70, .7), rgba(10, 5, 20, .6)); box-shadow: inset 0 0 0 1px rgba(232, 180, 74, .35); }
#fruit-wagers .bp-beltitem { box-shadow: inset 0 0 0 1px rgba(232, 180, 74, .3); }
/* inputs and toggles: a gold focus ring that fades in */
#fruit-wagers input[type="search"]:focus, #fruit-wagers textarea:focus { outline: none; box-shadow: inset 0 0 0 2px #e8b44a, 0 0 18px -4px rgba(232, 180, 74, .7); }

@media (max-width: 700px) { body.page-wagers .logo::after { font-size: .7rem; padding: 2px 14px 3px; } .bc-ic.k-c, .bc-ic.k-d { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bc-pool, .bc-beam, .bc-ic, .bc-vig::before, .bc-vig::after, body.page-wagers .logo-img, body.page-wagers .logo::before, .bc-jp-l i, .bc-jackpot::after, .bc-jackpot.bump .bc-jp-v,
  body.page-wagers .topbar::after, #wager-rail .wr-item::after, #wager-rail .wr-streak, #wager-rail .wr-bar u, #fruit-wagers .bp-toprow h2, #fruit-wagers .bpd-head h2,
  #fruit-wagers .bp-tabs button, #fruit-wagers .bp-tabs .bp-ico, #fruit-wagers .hsx-go { animation: none; }
  .bc-ic { opacity: 0; }
}

/* the chip art used in the backdrop (the page's own chip rules are scoped to #fruit-wagers) */
.bc-bg .bp-chipsvg .cs-d{fill:var(--k1)}
.bc-bg .bp-chipsvg .cs-i{fill:var(--k2);stroke:var(--k1);stroke-width:.8}
.bc-bg .bp-chipsvg .cs-ih{fill:#fff;opacity:.55}
.bc-bg .bp-chipsvg .cs-r{fill:var(--k5)}
.bc-bg .bp-chipsvg .cs-f{fill:var(--k3)}
.bc-bg .bp-chipsvg .cs-bevel{fill:none;stroke:var(--k1);stroke-opacity:.55;stroke-width:1.6}
.bc-bg .bp-chipsvg .cs-dash{fill:none;stroke:var(--k2);stroke-width:2;stroke-dasharray:4 3.2;opacity:.8}
.bc-bg .bp-chipsvg .cs-gloss{fill:#fff;opacity:.3}
.bc-bg .bp-chipsvg .cs-rim{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:2.6;stroke-linecap:round}
.bc-bg .bp-chipsvg .cs-spec{fill:#fff;opacity:.95}
.bc-bg .bp-chipsvg { display: block; }