/* Fruit Wagers: the home banner (templates/_home_stakes.html) and its sidebar button.
   The banner is its own little arena: plum felt with gold trim, slow light rays, rising poker chips,
   two fruits clashing in the middle, and the live board on the right. Real data only.
   All motion stops for reduced motion. No inline styles (CSP). */

.hsx {
  --gold: #ffcb5c; --plum: #b04dff; --pink: #ff2fd1;
  --tier0: #a7aec2; --tier1: #3ddc84; --tier2: #4aa3ff; --tier3: #c06bff; --tier4: #ffcb5c;
  display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1.2fr); align-items: center; gap: 22px;
  padding: 18px 24px; min-height: 176px; color: #fff; overflow: hidden;
}
/* trim: a moving gold / plum / pink band with an outer glow */
.home-stakes.hsx::before { inset: 0; clip-path: none; border-radius: 24px;
  background: linear-gradient(110deg, #ffd477, #b04dff 25%, #fff2b0 40%, #ffd477 55%, #b04dff 80%, #ffd477); background-size: 300% 100%;
  box-shadow: 0 12px 34px rgba(90, 30, 170, .45), 0 0 26px rgba(255, 203, 92, .18); animation: hsx-trim 10s linear infinite; }
/* felt: spotlights over a fine diamond pattern */
.home-stakes.hsx::after { inset: 2px; clip-path: none; border-radius: 22px;
  background:
    radial-gradient(28% 85% at 47% 50%, rgba(255, 203, 92, .26), transparent 70%),
    radial-gradient(45% 130% at 100% 0%, rgba(150, 70, 240, .42), transparent 70%),
    radial-gradient(35% 100% at 0% 100%, rgba(120, 50, 200, .3), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255, 203, 92, .05) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(255, 203, 92, .05) 0 1px, transparent 1px 15px),
    linear-gradient(100deg, #220f44 0%, #140828 50%, #0a0414 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 60px rgba(0, 0, 0, .6); }
@keyframes hsx-trim { to { background-position: 300% 0; } }

/* background layer */
.hsx-bg { position: absolute; inset: 2px; z-index: 0; border-radius: 22px; overflow: hidden; pointer-events: none; }
.hsx > :not(.hsx-bg) { position: relative; z-index: 1; min-width: 0; }
.hsx-rays { position: absolute; left: 47%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 203, 92, .13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 52%); mask: radial-gradient(circle, #000 0 18%, transparent 52%);
  animation: hsx-spin 60s linear infinite; }
@keyframes hsx-spin { to { transform: rotate(360deg); } }
.hsx-sweep { position: absolute; top: -50%; bottom: -50%; left: -30%; width: 18%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 241, 194, .14), transparent); animation: hsx-sweep 6.5s ease-in-out infinite; }
@keyframes hsx-sweep { 0%, 50% { left: -30%; } 100% { left: 130%; } }
/* poker chips drifting up and flipping */
.hsx-chips i { --c: var(--gold); position: absolute; bottom: -24px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  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 color-mix(in srgb, var(--c) 70%, transparent), 0 3px 6px rgba(0, 0, 0, .5);
  animation: hsx-chip var(--t) linear var(--d) infinite; }
.hsx-chips i:nth-child(1)  { --x: 4%;  --s: 16px; --t: 7s;    --d: -1s; }
.hsx-chips i:nth-child(2)  { --x: 13%; --s: 12px; --t: 9s;    --d: -5s;   --c: var(--plum); }
.hsx-chips i:nth-child(3)  { --x: 24%; --s: 18px; --t: 8s;    --d: -3s; }
.hsx-chips i:nth-child(4)  { --x: 33%; --s: 11px; --t: 10s;   --d: -7s;   --c: var(--tier1); }
.hsx-chips i:nth-child(5)  { --x: 52%; --s: 14px; --t: 7.5s;  --d: -2s;   --c: var(--pink); }
.hsx-chips i:nth-child(6)  { --x: 61%; --s: 17px; --t: 9.5s;  --d: -6s; }
.hsx-chips i:nth-child(7)  { --x: 70%; --s: 12px; --t: 8.5s;  --d: -4s;   --c: var(--tier2); }
.hsx-chips i:nth-child(8)  { --x: 80%; --s: 15px; --t: 7.2s;  --d: -.5s;  --c: var(--plum); }
.hsx-chips i:nth-child(9)  { --x: 89%; --s: 19px; --t: 10.5s; --d: -8s; }
.hsx-chips i:nth-child(10) { --x: 96%; --s: 11px; --t: 8s;    --d: -3.5s; --c: var(--tier1); }
@keyframes hsx-chip { 0% { transform: translateY(0) rotateX(0) rotate(0); opacity: 0; } 10% { opacity: .85; } 80% { opacity: .6; }
  100% { transform: translateY(-220px) rotateX(720deg) rotate(120deg); opacity: 0; } }

/* left: the pitch */
.hsx-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 900 0.76rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: #e7c4ff; }
.hsx-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; color: #0b2a17; background: #3ddc84; letter-spacing: .12em; }
.hsx-live i { width: 6px; height: 6px; border-radius: 50%; background: #0b2a17; animation: hsx-blink 1.4s ease-in-out infinite; }
@keyframes hsx-blink { 50% { opacity: .2; } }
.panel .hsx-title, .hsx-title { margin: 0; font: 400 clamp(1.9rem, 3.2vw, 2.7rem)/.95 var(--display); letter-spacing: .03em; text-transform: uppercase;
  color: #fff; text-shadow: 0 3px 0 #2a0640, 0 0 22px rgba(176, 77, 255, .55); }
.hsx-title em { font-style: normal; color: transparent; text-shadow: none;
  background: linear-gradient(100deg, #f4a91e 0 35%, #fff6d0 48%, #ffd56a 52%, #f4a91e 65% 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #3a1200) drop-shadow(0 0 14px rgba(255, 203, 92, .55));
  animation: hsx-gleam 4.5s ease-in-out infinite; }
@keyframes hsx-gleam { 0%, 40% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
.hsx-tag { margin: 8px 0 12px; font-size: .92rem; color: #ead8ff; }
.hsx-tag b { color: var(--gold); text-shadow: 0 0 12px rgba(255, 203, 92, .5); }
.hsx-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.hsx-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; overflow: hidden; border-radius: 14px;
  font: 900 .78rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .16s, box-shadow .16s; }
.hsx-btn .ic { width: 16px; height: 16px; }
.hsx-go { color: #2a1200; background: linear-gradient(180deg, #fff0b0, #ffcb5c 45%, #e8961c);
  box-shadow: 0 6px 20px rgba(255, 179, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(140, 60, 0, .35);
  animation: hsx-pulse 2.6s ease-in-out infinite; }
.hsx-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: hsx-shine 3.2s ease-in-out infinite; }
@keyframes hsx-pulse { 50% { box-shadow: 0 6px 30px rgba(255, 179, 40, .85), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(140, 60, 0, .35); } }
@keyframes hsx-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.hsx-ghost { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(231, 196, 255, .4); }
.hsx-btn:hover, .hsx-btn:focus-visible { transform: translateY(-2px) scale(1.03); }
.hsx-ghost:hover, .hsx-ghost:focus-visible { background: rgba(176, 77, 255, .3); }
.hsx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* middle: the duel (decoration only) */
.hsx-duel { height: 150px; }
.hsx-ring { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd477, #b04dff, #ff2fd1, #4aa3ff, #ffd477);
  -webkit-mask: radial-gradient(circle, transparent 0 60px, #000 61px 66px); mask: radial-gradient(circle, transparent 0 60px, #000 61px 66px);
  filter: drop-shadow(0 0 10px rgba(255, 203, 92, .7)); animation: hsx-spin 6s linear infinite; }
.hsx-flash { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 220, 140, .8) 28%, rgba(255, 47, 209, .3) 52%, transparent 70%);
  animation: hsx-flash 4s ease-out infinite; }
@keyframes hsx-flash { 0%, 36% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(1.25); } 62%, 100% { opacity: 0; transform: scale(1.6); } }
.hsx-pair { position: absolute; inset: 0; opacity: 0; animation: hsx-cycle 12s linear infinite; }
.hsx-pair.p2 { animation-delay: -8s; } .hsx-pair.p3 { animation-delay: -4s; }
@keyframes hsx-cycle { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
.hsx-pair img { position: absolute; top: 50%; width: 84px; height: 84px; margin-top: -42px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(176, 77, 255, .55)); }
.hsx-l { left: 0; animation: hsx-left 4s cubic-bezier(.5, 0, .3, 1) infinite; }
.hsx-r { right: 0; animation: hsx-right 4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes hsx-left { 0%, 100% { transform: translateX(0) rotate(-6deg); } 40% { transform: translateX(46px) rotate(10deg) scale(1.08); } 48% { transform: translateX(20px) rotate(-12deg); } }
@keyframes hsx-right { 0%, 100% { transform: translateX(0) rotate(6deg) scaleX(-1); } 40% { transform: translateX(-46px) rotate(-10deg) scale(1.08) scaleX(-1); } 48% { transform: translateX(-20px) rotate(12deg) scaleX(-1); } }
.hsx-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 2.1rem/1 var(--display); letter-spacing: .02em; 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; }
@keyframes hsx-vs { 0%, 34%, 60%, 100% { transform: translate(-50%, -50%) scale(1); } 42% { transform: translate(-50%, -50%) scale(1.35) rotate(-6deg); } }

/* right: the board */
.hsx-board { display: flex; flex-direction: column; gap: 8px; }
.hsx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hsx-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 12px;
  background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(231, 196, 255, .2); }
.hsx-stat b { font: 400 1.15rem/1 var(--display); color: #fff; letter-spacing: .03em; }
.hsx-stat em { font: 800 0.76rem/1 var(--label); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #cdb5e8; white-space: normal; text-align: center; }
.hsx-gold b { color: var(--gold); text-shadow: 0 0 12px rgba(255, 203, 92, .6); }
.hsx-green b { color: var(--tier1); text-shadow: 0 0 12px rgba(61, 220, 132, .5); }

.hsx-wager { --tc: var(--tier0); position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; overflow: hidden; border-radius: 14px;
  text-decoration: none; color: #fff; border-left: 4px solid var(--tc);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 30%, #12041e), rgba(0, 0, 0, .4) 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent), 0 6px 18px -8px var(--tc); transition: transform .16s, box-shadow .16s; }
.hsx-wager[data-tier="2"] { --tc: var(--tier1); } .hsx-wager[data-tier="3"] { --tc: var(--tier2); }
.hsx-wager[data-tier="4"] { --tc: var(--tier3); } .hsx-wager[data-tier="5"] { --tc: var(--tier4); }
.hsx-wager:hover, .hsx-wager:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tc), 0 10px 26px -6px var(--tc); }
.hsx-wager:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hsx-wfruits { display: flex; flex: none; }
.hsx-wfruits img { width: 40px; height: 40px; margin-right: -12px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.hsx-wfruits img:last-child { margin-right: 0; }
.hsx-wbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hsx-wbody b { font: 800 .88rem/1.2 var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsx-wbody small { font-size: 0.76rem; color: #d6c4ec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsx-wval { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.hsx-wval b { font: 400 1.25rem/1 var(--display); color: var(--tc); text-shadow: 0 0 12px color-mix(in srgb, var(--tc) 60%, transparent); }
.hsx-wval em { padding: 2px 7px; border-radius: 99px; font: 900 0.76rem/1.2 var(--label); font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: color-mix(in srgb, var(--tc) 40%, #000); border: 1px solid color-mix(in srgb, var(--tc) 75%, transparent); }
.hsx-wgo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #1a0630; background: var(--tc);
  box-shadow: 0 0 12px var(--tc); transition: transform .16s; }
.hsx-wgo .ic { width: 15px; height: 15px; }
.hsx-wager:hover .hsx-wgo { transform: rotate(-12deg) scale(1.12); }
.hsx-wager[data-tier="5"] { animation: hsx-legend 2.6s ease-in-out infinite; }
@keyframes hsx-legend { 50% { box-shadow: inset 0 0 0 1px var(--tc), 0 0 26px -2px var(--tc); } }
.hsx-wager[data-tier="4"]::after, .hsx-wager[data-tier="5"]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 260% 100%; animation: hsx-glint 3.6s linear infinite; }
@keyframes hsx-glint { from { background-position: 160% 0; } to { background-position: -100% 0; } }

/* empty board: an open invitation with the value ladder */
.hsx-empty { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(100deg, rgba(255, 203, 92, .14), rgba(0, 0, 0, .35) 70%);
  border: 2px dashed rgba(255, 203, 92, .6); animation: hsx-invite 2.8s ease-in-out infinite; transition: transform .16s; }
.hsx-empty:hover, .hsx-empty:focus-visible { transform: translateY(-2px); border-style: solid; }
@keyframes hsx-invite { 50% { border-color: rgba(255, 203, 92, 1); box-shadow: 0 0 22px -4px rgba(255, 203, 92, .7); } }
.hsx-etext { display: flex; flex-direction: column; gap: 2px; }
.hsx-etext b { font: 900 .9rem/1.2 var(--label); color: var(--gold); }
.hsx-etext small { font-size: .76rem; color: #e1d0f5; }
.hsx-ladder { display: flex; flex-wrap: wrap; gap: 5px; }
.hsx-ladder i { --tc: var(--tier0); 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); }
.hsx-ladder i[data-tier="2"] { --tc: var(--tier1); box-shadow: 0 0 6px -1px var(--tc); }
.hsx-ladder i[data-tier="3"] { --tc: var(--tier2); box-shadow: 0 0 9px -1px var(--tc); }
.hsx-ladder i[data-tier="4"] { --tc: var(--tier3); box-shadow: 0 0 12px 0 var(--tc); }
.hsx-ladder i[data-tier="5"] { --tc: var(--tier4); box-shadow: 0 0 14px 1px var(--tc); animation: hsx-legend 2.6s ease-in-out infinite; }

@media (max-width: 1150px) {
  .hsx { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1.15fr); gap: 16px; padding: 16px 18px; }
  .hsx-pair img { width: 68px; height: 68px; margin-top: -34px; }
  .hsx-ring { width: 110px; height: 110px; margin: -55px;
    -webkit-mask: radial-gradient(circle, transparent 0 49px, #000 50px 55px); mask: radial-gradient(circle, transparent 0 49px, #000 50px 55px); }
}
@media (max-width: 820px) {
  .hsx { grid-template-columns: minmax(0, 1fr) 130px; }
  .hsx-duel { grid-row: 1; grid-column: 2; height: 110px; }
  .hsx-pair img { width: 52px; height: 52px; margin-top: -26px; }
  .hsx-ring { width: 84px; height: 84px; margin: -42px;
    -webkit-mask: radial-gradient(circle, transparent 0 37px, #000 38px 42px); mask: radial-gradient(circle, transparent 0 37px, #000 38px 42px); }
  .hsx-vs { font-size: 1.5rem; }
  .hsx-board { grid-column: 1 / -1; }
  .hsx-rays { left: 80%; top: 30%; }
}
@media (max-width: 480px) {
  .hsx { grid-template-columns: 1fr; }
  .hsx-duel { display: none; }
  .hsx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hsx *, .hsx *::before, .hsx *::after, .home-stakes.hsx::before { animation: none !important; transition: none !important; }
  .hsx-chips i { opacity: .5; bottom: auto; top: 30%; }
  .hsx-pair.p1 { opacity: 1; }
}
@media (forced-colors: active) { .hsx-btn, .hsx-wager, .hsx-empty { border: 1px solid ButtonText; } }

/* sidebar button: an art button like Leaderboards and Crews. Fruits pan across plum felt, gold + purple trim. */
.navbtn-stakes { --nb-frame: linear-gradient(135deg, #7b2fd0, #ffd477 32%, #fff2c4 45%, #d9971c 68%, #b04dff); }
.navbtn-stakes .ic { color: #ffcb5c; }
.nav-art-stakes { background-image: none !important; animation: none; overflow: hidden;
  background: radial-gradient(60% 140% at 85% 50%, rgba(176, 77, 255, .55), transparent 70%), linear-gradient(100deg, #12031d, #2a0a4a 70%, #3a0f66) !important; }
.nav-art-stakes::after { background: linear-gradient(90deg, rgba(8, 2, 14, .92), rgba(8, 2, 14, .55) 48%, rgba(8, 2, 14, .05)); }
.nav-fw-track { position: absolute; top: 50%; left: 0; display: flex; gap: 8px; width: max-content; transform: translateY(-50%); padding-left: 38%; }
.nav-fw-track img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.nav-fw-shine { position: absolute; z-index: 1; top: -30%; bottom: -30%; left: -30%; width: 20%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 241, 194, .22), transparent); opacity: 0; }
.navbtn-stakes .nb-new, .navbtn-crews .nb-new { position: relative; z-index: 2; margin-left: auto; padding: 2px 6px; border-radius: 99px; font: 900 0.76rem/1 var(--label); letter-spacing: .1em;
  text-transform: uppercase; font-style: normal; color: #2a1200; background: linear-gradient(180deg, #fff0b0, #ffcb5c 55%, #e8961c); box-shadow: 0 0 10px rgba(255, 203, 92, .6); }
@keyframes nav-fw-pan { to { transform: translate(-50%, -50%); } }
@keyframes nav-fw-shine { 0%, 60% { left: -30%; opacity: 0; } 65% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .nav-fw-track { animation: nav-fw-pan 22s linear infinite; }
  .nav-fw-shine { animation: nav-fw-shine 5s ease-in-out infinite; }
  .navbtn-stakes:is(:hover, :focus-visible) .nav-fw-track { animation-duration: 9s; }
}

/* the button's icon flips through fruits, one every .3s (12 fruits = 3.6s loop) */
.hsx-cycle { position: relative; display: inline-block; flex: none; width: 22px; height: 22px; }
.hsx-cycle img { position: absolute; inset: 0; width: 22px; height: 22px; object-fit: contain; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
  animation: hsx-fruit 3.6s steps(1, end) infinite; }
.hsx-cycle img:nth-child(1) { animation-delay: 0s; }    .hsx-cycle img:nth-child(2) { animation-delay: .3s; }
.hsx-cycle img:nth-child(3) { animation-delay: .6s; }   .hsx-cycle img:nth-child(4) { animation-delay: .9s; }
.hsx-cycle img:nth-child(5) { animation-delay: 1.2s; }  .hsx-cycle img:nth-child(6) { animation-delay: 1.5s; }
.hsx-cycle img:nth-child(7) { animation-delay: 1.8s; }  .hsx-cycle img:nth-child(8) { animation-delay: 2.1s; }
.hsx-cycle img:nth-child(9) { animation-delay: 2.4s; }  .hsx-cycle img:nth-child(10) { animation-delay: 2.7s; }
.hsx-cycle img:nth-child(11) { animation-delay: 3s; }   .hsx-cycle img:nth-child(12) { animation-delay: 3.3s; }
@keyframes hsx-fruit { 0% { opacity: 1; } 8.34%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hsx-cycle img:first-child { opacity: 1; } }

/* ---- home banner extras: personal line, hottest wager, tier chips, live feed ---- */
.hsx-me { --tc: var(--gold); display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 12px; max-width: 100%; border-radius: 99px; text-decoration: none; color: #fff;
  background: rgba(10, 4, 20, .6); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .35); font-size: .76rem; transition: transform .15s, box-shadow .15s; }
.hsx-me b { color: var(--gold); font-weight: 900; } .hsx-me small { color: #cdbde6; } .hsx-me em { font-style: normal; font: 900 0.76rem/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #2a1200; background: var(--gold); padding: 3px 7px; border-radius: 99px; }
.hsx-me:hover, .hsx-me:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gold), 0 6px 18px -6px var(--gold); }
.hsx-me.hot { box-shadow: inset 0 0 0 1px #3ddc84, 0 0 16px -4px #3ddc84; } .hsx-me.hot b { color: #7dffb0; }
.hsx-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: hsx-ping 1.4s ease-out infinite; }
@keyframes hsx-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
.hsx-hot { --tc: var(--tier0); position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 10px; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--tc) 24%, #14081f), #14081f 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 70%, transparent), 0 0 18px -6px var(--tc);
  transition: transform .15s, box-shadow .15s; }
.hsx-hot[data-tier="2"] { --tc: var(--tier1); } .hsx-hot[data-tier="3"] { --tc: var(--tier2); } .hsx-hot[data-tier="4"] { --tc: var(--tier3); } .hsx-hot[data-tier="5"] { --tc: var(--tier4); }
.hsx-hot:hover, .hsx-hot:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tc), 0 12px 28px -6px var(--tc); }
.hsx-hotflag { position: absolute; top: 0; left: 0; padding: 2px 10px 2px 8px; border-radius: 0 0 10px 0; font: 900 0.76rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #2a1200; background: linear-gradient(90deg, #ffd477, #ff9d2f); }
.hsx-hotfruits { display: flex; flex: none; } .hsx-hotfruits img { width: 54px; height: 54px; object-fit: contain; margin-right: -12px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); animation: hsx-bob 4s ease-in-out infinite; }
.hsx-hotfruits img:nth-child(2) { animation-delay: -1.3s; } .hsx-hotfruits img:nth-child(3) { animation-delay: -2.6s; }
.hsx-hotbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; margin-left: 12px; }
.hsx-hotbody b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.hsx-hotbody small { display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #cdbde6; font-size: 0.76rem; }
.hsx-hotbody small img { border-radius: 50%; }
.hsx-hotgo { flex: none; padding: 7px 12px; border-radius: 10px; font: 900 0.76rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #2a1200; background: linear-gradient(180deg, #ffd477, #ff9d2f);
  box-shadow: 0 3px 0 #7a3a00; animation: hsx-nudge 2.2s ease-in-out infinite; }
@keyframes hsx-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(3px); } 90% { transform: translateX(-2px); } }
.hsx-tiers { display: flex; flex-wrap: wrap; gap: 5px; }
.hsx-tiers a { --tc: var(--tier0); display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 99px; text-decoration: none; color: color-mix(in srgb, var(--tc) 55%, #fff);
  font: 900 0.76rem/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--tc) 14%, #0c0516); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent); transition: transform .15s, box-shadow .15s; }
.hsx-tiers a b { min-width: 18px; padding: 2px 5px; border-radius: 99px; text-align: center; color: #1a0a00; background: var(--tc); }
.hsx-tiers a[data-tier="2"] { --tc: var(--tier1); } .hsx-tiers a[data-tier="3"] { --tc: var(--tier2); } .hsx-tiers a[data-tier="4"] { --tc: var(--tier3); } .hsx-tiers a[data-tier="5"] { --tc: var(--tier4); }
.hsx-tiers a:hover, .hsx-tiers a:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tc), 0 6px 14px -4px var(--tc); }
.hsx-feed { grid-column: 1 / -1; display: flex; align-items: stretch; min-width: 0; margin: 2px -24px -18px; background: rgba(8, 3, 16, .72); box-shadow: inset 0 1px 0 rgba(255, 203, 92, .25); overflow: hidden; }
.hsx-feedhead { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 14px; font: 900 0.76rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #2a1200; background: linear-gradient(90deg, #ffd477, #ff9d2f); }
.hsx-feedhead svg { width: 14px; height: 14px; }
.hsx-feedwin { 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); }
.hsx-feedtrack { display: flex; width: max-content; animation: hsx-marquee 50s linear infinite; }
.hsx-feed:hover .hsx-feedtrack { animation-play-state: paused; }
.hsx-fi { padding: 7px 22px; white-space: nowrap; font-size: .76rem; color: #e8dcf7; } .hsx-fi b { color: #fff; } .hsx-fi em { font-style: normal; color: var(--gold); font-weight: 800; } .hsx-fi small { color: #a794c2; }
@keyframes hsx-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hsx-feedtrack, .hsx-hotgo, .hsx-hotfruits img, .hsx-dot { animation: none; } }
@media (max-width: 900px) { .hsx-feed { margin: 2px -18px -16px; } }
@keyframes hsx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- home banner round 2: tags, proof, quick post, rival line, regions, refresh flash ---- */
.hsx-wbody b i, .hsx-hotbody b i { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px; vertical-align: 2px; font: 900 0.76rem/1.4 var(--label); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.hsx-tag-n { color: #04210f; background: #3ddc84; } .hsx-tag-h { color: #fff; background: linear-gradient(90deg, #ff5a2f, #ff2fd1); animation: hsx-ping2 1.6s ease-in-out infinite; } .hsx-tag-g { color: #2a1200; background: #ffcb5c; }
@keyframes hsx-ping2 { 50% { box-shadow: 0 0 10px 1px #ff5a2f; } }
.hsx-proof { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 0.76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #cdbde6; }
.hsx-proof span { display: inline-flex; align-items: center; gap: 4px; } .hsx-proof svg { width: 12px; height: 12px; color: var(--gold); }
.hsx-quick { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.hsx-quick > span { font: 900 0.76rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #a794c2; }
.hsx-quick a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(10, 4, 20, .6); box-shadow: inset 0 0 0 1px rgba(255, 203, 92, .3); transition: transform .15s, box-shadow .15s; }
.hsx-quick a:hover, .hsx-quick a:focus-visible { transform: translateY(-3px) scale(1.08); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 16px -6px var(--gold); }
.hsx-quick img { width: 26px; height: 26px; object-fit: contain; }
.hsx-rival { color: #ffd982 !important; font-weight: 800; }
.hsx-regions a { padding-left: 9px; } .hsx-top { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 0.76rem; font-weight: 800; color: #cdbde6; }
.hsx-top svg { width: 12px; height: 12px; color: var(--gold); } .hsx-top b { color: #fff; }
.hsx-fi u { text-decoration: none; margin-right: 6px; padding: 1px 7px; border-radius: 99px; font: 900 0.76rem/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #2a1200; background: linear-gradient(90deg, #ffd477, #ff9d2f); }
.hsx-fi.star { background: linear-gradient(90deg, transparent, rgba(255, 203, 92, .16), transparent); }
.hsx-flash-up { animation: hsx-flashup .9s ease-out; } @keyframes hsx-flashup { 0% { color: #fff; text-shadow: 0 0 16px #ffcb5c; transform: scale(1.25); } 100% { transform: none; } }
.hsx-toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; padding: 10px 16px; border-radius: 12px; font-weight: 800; font-size: .82rem; color: #2a1200; background: linear-gradient(180deg, #ffd477, #ff9d2f); box-shadow: 0 10px 30px -6px #000; animation: hsx-toast 4s ease forwards; }
@keyframes hsx-toast { 0% { opacity: 0; transform: translateY(14px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 700px) {
  .hsx-proof, .hsx-quick > span { display: none; } .hsx-feed { margin: 2px -14px -14px; } .hsx-top { margin-left: 0; width: 100%; }
  .hsx-hot { flex-wrap: wrap; } .hsx-hotbody { flex-basis: 40%; } .hsx-stats { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .hsx-feed { display: none; } }
.hsx-hot { gap: 8px; padding: 16px 10px 8px 8px; } .hsx-hotfruits img { width: 42px; height: 42px; margin-right: -10px; } .hsx-hotfruits img:nth-child(n+3) { display: none; }
.hsx-hotbody { margin-left: 8px; } .hsx-hotbody b { font-size: .84rem; } .hsx-hotbody small { font-size: 0.76rem; } .hsx-hotbody small.hsx-rival { white-space: normal; line-height: 1.2; }
.hsx-hotgo { padding: 6px 9px; font-size: 0.76rem; } .hsx-hot .hsx-wval b { font-size: 1rem; }
.hsx-proof { font-size: 0.76rem; gap: 2px 9px; }

/* readable personal line under the buttons */
.hsx-me { gap: 10px; padding: 8px 16px; font-size: .95rem; line-height: 1.25; background: rgba(10, 4, 20, .82); }
.hsx-me b { font-size: 1rem; }
.hsx-me small { font-size: .9rem; color: #f0e6ff; }
.hsx-me em { padding: 4px 10px; font: 900 .82rem/1 var(--label); letter-spacing: .06em; }

/* ---- Queue: a compact arena plate, with a clear label over the moving art ---- */
.navbtn-queue {
  min-height: 58px; padding: 8px 11px; gap: 8px;
  --nb-frame: linear-gradient(135deg, #e4fcff, #45d8ff 30%, #1269aa 64%, #97edff);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 4px rgba(39, 202, 255, .22));
}
.navbtn-queue::after { background: #031423; box-shadow: inset 0 0 0 1px #3cb8da44; }
.navbtn-queue .queue-button-video { object-position: 68% center; }
.navbtn-queue .queue-button-shade {
  background: linear-gradient(90deg, #031321ee, #031321d9 58%, #062f5266);
  box-shadow: inset 0 1px 0 #b9efff22, inset 0 -2px 0 #45d8ff33;
}
.navbtn-queue .queue-button-label { gap: 10px; min-width: 0; text-shadow: 0 2px 2px #000; }
.qb-emblem {
  position: relative; display: grid; place-items: center; flex: 0 0 34px; height: 36px;
  color: #e0fbff; background: linear-gradient(145deg, #75eaff, #1278b0 55%, #083653);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.qb-emblem::before { content: ""; position: absolute; inset: 1px; background: linear-gradient(145deg, #164768, #071a2d); clip-path: inherit; }
.qb-emblem .ic { position: relative; width: 25px; height: 25px; filter: drop-shadow(0 1px 1px #000); }
.qb-text { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.qb-text b { font: 400 1.5rem/1 var(--display); letter-spacing: .055em; color: #fff; text-shadow: 0 2px 0 #021a3a; }
.qb-text small { font: 800 .72rem/1 var(--label); letter-spacing: .14em; color: #b6eaff; }
.qb-go {
  position: relative; z-index: 3; margin-left: auto; flex: 0 0 26px; height: 30px;
  display: grid; place-items: center; color: #ddfaff;
  background: linear-gradient(145deg, #51ccea66, #0a507088);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.qb-go .ic { width: 17px; height: 17px; }
.qb-shine { position: absolute; inset: 2px; pointer-events: none; overflow: hidden; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.qb-shine::before { content: ""; position: absolute; inset: -50% auto -50% -50%; width: 30%; background: linear-gradient(90deg, transparent, #b9f4ff22, transparent); transform: skewX(-25deg); }
.navbtn-queue .queue-button-lightning { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); opacity: .55; }
.navbtn-queue .queue-lightning-halo { stroke-width: 2px; filter: none; opacity: .35; }
.navbtn-queue .queue-lightning-core { stroke-width: 1px; filter: none; }
.navbtn-queue:is(:hover, :focus-visible) { transform: none; filter: drop-shadow(0 0 7px #27caff55); }
.navbtn-queue:is(:hover, :focus-visible) .queue-button-shade { background: linear-gradient(90deg, #06263dee, #083655ce 58%, #08729455); }
.navbtn-queue:is(:hover, :focus-visible) .queue-button-lightning, .navbtn-queue.on .queue-button-lightning { opacity: .8; }
.navbtn-queue:is(:hover, :focus-visible) .qb-go { color: #022436; background: linear-gradient(145deg, #e5ffff, #59d8ff); }
.navbtn-queue:focus-visible { outline: 2px solid #e5ffff; outline-offset: 4px; }
.navbtn-queue.on { --nb-frame: linear-gradient(135deg, #fff, #65e3ff 45%, #1b7ac1); }
.navbtn-queue.on .queue-button-shade { opacity: 1; background: linear-gradient(90deg, #073652f2, #052b43e8 60%, #075576aa); box-shadow: inset 3px 0 0 #93efff, inset 0 -2px 0 #45d8ff55; }
.navbtn-queue.on .qb-go { color: #022436; background: #8ae8ff; }
@media (prefers-reduced-motion: no-preference) {
  .navbtn-queue, .qb-go { transition: filter .2s ease, background .2s ease, color .2s ease; }
  .navbtn-queue:is(:hover, :focus-visible) .qb-shine::before { animation: qb-sweep .65s ease-out both; }
  .navbtn-queue .queue-button-lightning path { animation-duration: 4s; }
}
@keyframes qb-sweep { to { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .navbtn-queue::after { background: #031423 url('/static/img/hero.jpg') 68% center / cover; }
  .qb-shine { display: none; }
}

/* ---- sidebar Fruit Wagers: the home banner's duel plays inside the button ---- */
.nav-duel { position: absolute; z-index: 0; right: 30px; top: 0; bottom: 0; width: 84px; }
.nav-duel .hsx-pair img { width: 34px; height: 34px; margin-top: -17px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(176, 77, 255, .6)); }
.nav-duel .hsx-l { left: 4px; animation: nd-left 4s cubic-bezier(.5, 0, .3, 1) infinite; }
.nav-duel .hsx-r { right: 4px; animation: nd-right 4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes nd-left { 0%, 100% { transform: translateX(0) rotate(-6deg); } 40% { transform: translateX(14px) rotate(10deg) scale(1.1); } 48% { transform: translateX(6px) rotate(-12deg); } }
@keyframes nd-right { 0%, 100% { transform: translateX(0) rotate(6deg) scaleX(-1); } 40% { transform: translateX(-14px) rotate(-10deg) scale(1.1) scaleX(-1); } 48% { transform: translateX(-6px) rotate(12deg) scaleX(-1); } }
.nd-ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd477, #b04dff, #ff2fd1, #4aa3ff, #ffd477); -webkit-mask: radial-gradient(circle, transparent 0 18px, #000 19px 21px); mask: radial-gradient(circle, transparent 0 18px, #000 19px 21px);
  filter: drop-shadow(0 0 5px rgba(255, 203, 92, .7)); }
.nd-vs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 400 .95rem/1 var(--display); color: #fff; text-shadow: 0 0 2px #ff2fd1, 0 1px 0 #6a0d6f, 0 0 8px rgba(255, 47, 209, .9); }
.navbtn-stakes .nav-art-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; }
.navbtn-stakes .hsx-cycle { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .nd-ring { animation: hsx-spin 6s linear infinite; }
  .nd-vs { animation: nd-vs 4s ease-in-out infinite; }
}
@keyframes nd-vs { 0%, 34%, 60%, 100% { scale: 1; } 42% { scale: 1.35; } }
@media (prefers-reduced-motion: reduce) { .nav-duel .hsx-pair.p1 { opacity: 1; } }
.navbtn-stakes { min-height: 58px; }
.navbtn-stakes .nav-art-label { max-width: 96px; line-height: 1.15; }
.navbtn-stakes .nb-new, .navbtn-crews .nb-new { position: absolute; top: 5px; right: 8px; margin: 0; z-index: 3; }
.nav-duel { right: 8px; top: 8px; bottom: 0; width: 84px; }

/* sixth limit step (10B): red, after grey, green, blue, purple, gold */
:root { --tier5: #ff4d5a; }
.hsx-wager[data-tier="6"], .hsx-hot[data-tier="6"], .hsx-tiers a[data-tier="6"], .hsx-ladder i[data-tier="6"] { --tc: var(--tier5); }
.hsx-wager[data-tier="6"] { animation: hsx-legend 2.6s ease-in-out infinite; }

/* open-wager posts only: a grey "Under 10M" step (0) and "Up to 50M" in green (1) */
.hsx-wager[data-tier="1"], .hsx-hot[data-tier="1"], .hsx-tiers a[data-tier="1"], .hsx-ladder i[data-tier="1"] { --tc: var(--tier1); }
.hsx-ladder i[data-tier="1"] { box-shadow: 0 0 6px -1px var(--tc); }

/* home banner: one colour per step - grey, green, blue, purple, gold, red, pink */
:root { --tier6: #ff6ad5; }
.hsx-wager[data-tier="1"], .hsx-hot[data-tier="1"], .hsx-tiers a[data-tier="1"], .hsx-ladder i[data-tier="1"] { --tc: var(--tier1); }
.hsx-wager[data-tier="2"], .hsx-hot[data-tier="2"], .hsx-tiers a[data-tier="2"], .hsx-ladder i[data-tier="2"] { --tc: var(--tier2); }
.hsx-wager[data-tier="3"], .hsx-hot[data-tier="3"], .hsx-tiers a[data-tier="3"], .hsx-ladder i[data-tier="3"] { --tc: var(--tier3); }
.hsx-wager[data-tier="4"], .hsx-hot[data-tier="4"], .hsx-tiers a[data-tier="4"], .hsx-ladder i[data-tier="4"] { --tc: var(--tier4); }
.hsx-wager[data-tier="5"], .hsx-hot[data-tier="5"], .hsx-tiers a[data-tier="5"], .hsx-ladder i[data-tier="5"] { --tc: var(--tier5); }
.hsx-wager[data-tier="6"], .hsx-hot[data-tier="6"], .hsx-tiers a[data-tier="6"], .hsx-ladder i[data-tier="6"] { --tc: var(--tier6); }

/* final order: grey, green, blue, purple, pink, red, gold (3B+) */
.hsx-wager[data-tier="4"], .hsx-hot[data-tier="4"], .hsx-tiers a[data-tier="4"], .hsx-ladder i[data-tier="4"] { --tc: var(--tier6); }
.hsx-wager[data-tier="5"], .hsx-hot[data-tier="5"], .hsx-tiers a[data-tier="5"], .hsx-ladder i[data-tier="5"] { --tc: var(--tier5); }
.hsx-wager[data-tier="6"], .hsx-hot[data-tier="6"], .hsx-tiers a[data-tier="6"], .hsx-ladder i[data-tier="6"] { --tc: var(--tier4); }

/* six steps: grey, green, blue, purple, pink, gold */
.hsx-wager[data-tier="4"], .hsx-hot[data-tier="4"], .hsx-tiers a[data-tier="4"], .hsx-ladder i[data-tier="4"] { --tc: var(--tier6); }
.hsx-wager[data-tier="5"], .hsx-hot[data-tier="5"], .hsx-tiers a[data-tier="5"], .hsx-ladder i[data-tier="5"] { --tc: var(--tier4); }

/* purple up to 1B, red up to 3B, gold 3B+ */
.hsx-wager[data-tier="4"], .hsx-hot[data-tier="4"], .hsx-tiers a[data-tier="4"], .hsx-ladder i[data-tier="4"] { --tc: var(--tier5); }

/* ---- home banner, compact: about half the height. The full board lives on /fruit-wagers. ---- */
#home-stakes.hsx { min-height: 0; padding: 12px 20px 0; gap: 16px; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.55fr); }
#home-stakes .hsx-proof, #home-stakes .hsx-me, #home-stakes .hsx-board .hsx-wager, #home-stakes .hsx-regions, #home-stakes .hsx-rival { display: none; }
#home-stakes .hsx-title { font-size: 1.9rem; }
#home-stakes .hsx-tag { margin: 0; font-size: .86rem; }
#home-stakes .hsx-board { gap: 6px; }
#home-stakes .hsx-stat { padding: 4px 4px 4px; gap: 2px; border-radius: 10px; }
#home-stakes .hsx-stat b { font-size: 1rem; }
#home-stakes .hsx-hot { padding: 13px 12px 6px 10px; }
#home-stakes .hsx-hotfruits img { width: 38px; height: 38px; }
#home-stakes .hsx-duel { height: 104px; }
#home-stakes .hsx-ring { width: 92px; height: 92px; margin: -46px; }
#home-stakes .hsx-pair img { width: 62px; height: 62px; margin-top: -31px; }
#home-stakes .hsx-vs { font-size: 1.5rem; }
#home-stakes .hsx-feed { margin: 0 -20px; }

/* home banner clash: six head-to-heads of mythicals, gamepasses and chromatic fruits take turns, four seconds each */
.hsx-pair.rot { animation: hsx-cycle6 24s linear infinite; }
.hsx-pair.rot.q2 { animation-delay: -20s; } .hsx-pair.rot.q3 { animation-delay: -16s; } .hsx-pair.rot.q4 { animation-delay: -12s; }
.hsx-pair.rot.q5 { animation-delay: -8s; } .hsx-pair.rot.q6 { animation-delay: -4s; }
@keyframes hsx-cycle6 { 0% { opacity: 0; } 1.5%, 15.2% { opacity: 1; } 16.7%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hsx-pair.rot.q1 { opacity: 1; } }