/* No tilt, scale or lift on hover: moving text gets resampled and looks blurry or slanted. Hover feedback is colour, outline and glow only. */
.hub-topic:hover, #fruit-wagers .bp-post:hover, #fruit-wagers .bp-vote:hover, #fruit-wagers .bp-pick button:hover:not(:disabled),
#fruit-wagers .bp-beltitem:hover, #fruit-wagers .bp-tk:hover, #fruit-wagers .bp-showdown:hover .bp-glyph, #fruit-wagers .bp-post:hover .bp-chip,
#fruit-wagers .bp-dealside:hover .bp-chip, #fruit-wagers .bp-button:hover .bp-btnarr, .home-pair > .home-community .hc-panel > .hc-item:hover,
.pick-tile:hover > .pick-frame, .navbtn:hover, .card:hover, .social-link:hover,
.hc-open:hover, .hc-open:focus-visible, .hc-tabs a:hover, .hsx-btn:hover, .hsx-btn:focus-visible, .hsx-wager:hover, .hsx-wager:focus-visible,
.hsx-wager:hover .hsx-wgo, .hsx-empty:hover, .hsx-empty:focus-visible, .hsx-me:hover, .hsx-me:focus-visible, .hsx-hot:hover, .hsx-hot:focus-visible,
.hsx-tiers a:hover, .hsx-tiers a:focus-visible, .hsx-quick a:hover, .hsx-quick a:focus-visible, .bpx-steps li:hover, .bpx-bdg:hover,
#fruit-wagers .bp-post:hover, .bpx-card:hover { transform: none !important; }
.theme-dot:hover { transform: rotate(45deg) !important; }
/* the lift becomes a glow so hovering still reads as "clickable" */
#fruit-wagers .bp-post:hover, .hsx-wager:hover, .hsx-hot:hover, .hsx-tiers a:hover, .hsx-quick a:hover, .card:hover, .hsx-me:hover { filter: brightness(1.12); }
#fruit-wagers, #fruit-wagers * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* The Crew/Wars button: a burnt-timber board, with little pewter shield badges on scorched wood drifting across it. */
.nav-art-crews { background: radial-gradient(70% 120% at 85% 110%, rgba(255, 120, 30, .38), transparent 70%), linear-gradient(180deg, #3a2515, #160d07) !important; }
.nav-art-crews::after { background: linear-gradient(90deg, rgba(10, 5, 3, .92), rgba(10, 5, 3, .55) 45%, rgba(10, 5, 3, .05)); }
.nav-cr-ic { width: 26px; height: 26px; border-radius: 3px; border: 0; opacity: 1; background: linear-gradient(180deg, #4a3322, #1f120a); box-shadow: inset 0 0 0 1px #8a5a32, inset 0 0 0 2px #0a0503, 0 2px 4px rgba(0, 0, 0, .7); }
.nav-cr-ic.crew-ic-empty { color: #d7dde4; }
.nav-cr-ic.crew-ic-empty .ic { width: 15px; height: 15px; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 4px rgba(255, 130, 40, .55)); }
.nav-cr-ic:nth-child(3n+2).crew-ic-empty { color: #ffc27a; }
.nav-cr-ic:nth-child(3n).crew-ic-empty { color: #e9d6b0; }

/* The Crew/Wars button, bigger: the painted battle moving behind it, framed in burnt paper (same size family as the Queue button). */
.navbtn-crews { min-height: 66px; padding: 10px 16px; }
.navbtn-crews::before { inset: 0; z-index: 3; background: none !important; border: 9px solid transparent; border-image: url("../img/cw/burn-r.webp?v=d23f5aecd1") 24 / 9px round; clip-path: none; }
.navbtn-crews::after, .navbtn-crews.on::after { content: none; }
.navbtn-crews .nav-art-crews { inset: 4px; clip-path: none; border-radius: 2px; background: #0c0805 !important; }
.nav-cr-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nav-art-crews::after { background: linear-gradient(90deg, rgba(10, 5, 3, .86), rgba(10, 5, 3, .5) 50%, rgba(10, 5, 3, .1)); }
.navbtn-crews .nav-art-label { font-size: .86rem; }
.navbtn-crews { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
@media (prefers-reduced-motion: reduce) { .nav-cr-vid { display: none; } .nav-art-crews { background: url("../img/cw/battle-btn.jpg?v=add6daa3e4") center / cover !important; } }

.navbtn-crews .nb-new { top: 50%; transform: translateY(-50%); right: 16px; }


/* the Crew/Wars button's edge: a piece of old paper torn out of a page, its ragged rim showing around the painting */
.navbtn-crews::before { clip-path: none; border: 12px solid transparent; border-image: url("../img/cw/torn-paper.webp?v=14f76843b0") 14 / 12px round; }
.navbtn-crews .nav-art-crews { inset: 9px; }
.navbtn-crews { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
.navbtn-crews .nb-new { right: 22px; }
.navbtn-crews .nav-art-crews { box-shadow: inset 0 0 8px 3px rgba(60, 34, 12, .75); }
/* the painting feathers into the paper instead of stopping at a hard line */
.navbtn-crews .nav-art-crews { inset: 7px; box-shadow: none; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 7px), transparent), linear-gradient(180deg, transparent, #000 7px, #000 calc(100% - 7px), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 7px), transparent), linear-gradient(180deg, transparent, #000 7px, #000 calc(100% - 7px), transparent); mask-composite: intersect; }
/* gradient: paper-brown at the left and along the top and bottom, clearing toward the painting */
.navbtn-crews .nav-art-crews::after { background:
  linear-gradient(180deg, rgba(104, 70, 40, .85), rgba(104, 70, 40, .2) 34%, transparent 50%, rgba(80, 52, 28, .25) 68%, rgba(70, 46, 26, .85)),
  linear-gradient(90deg, rgba(40, 22, 10, .95), rgba(60, 36, 18, .7) 50%, rgba(104, 70, 40, .35)); }

/* the Crew/Wars button is the front-page banner in small: the painting under a brown gradient, framed by the same scorched, tattered edge */
.navbtn-crews::before { border: 14px solid transparent; border-image: url("../img/cw/burn-h-soft.webp?v=749fc7af8a") 64 / 14px round; }
.navbtn-crews .nav-art-crews { inset: 8px; -webkit-mask-image: none; mask-image: none; }
.navbtn-crews .nav-art-crews::after { background: linear-gradient(90deg, rgba(40, 22, 10, .92), rgba(60, 36, 18, .6) 50%, rgba(60, 36, 18, .15)), linear-gradient(180deg, rgba(40, 22, 10, .45), transparent 30%, transparent 70%, rgba(30, 16, 8, .55)); }
.navbtn-crews .nb-new { right: 20px; }