/* Billiard-style number faces, following the Xiaozhang picker ball treatment. */
body:has(:is(.home-rebuild,.post-detail-page.reference-style)) :is(.draw-number.red,[data-zev-wave="red"]) {
  --ball-light:#ff6972; --ball-mid:#f5222d; --ball-deep:#b80716;
}
body:has(:is(.home-rebuild,.post-detail-page.reference-style)) :is(.draw-number.blue,[data-zev-wave="blue"]) {
  --ball-light:#4da3ff; --ball-mid:#1677ff; --ball-deep:#084298;
}
body:has(:is(.home-rebuild,.post-detail-page.reference-style)) :is(.draw-number.green,[data-zev-wave="green"]) {
  --ball-light:#52d887; --ball-mid:#16a34a; --ball-deep:#087f3d;
}

/* :is keeps enough specificity for the original application's paid/modal rules. */
:is(
  .home-rebuild .draw-result-home .draw-number:is(.red,.blue,.green),
  .home-rebuild .zev-free-values > .zev-number-chip[data-zev-wave],
  .post-detail-page .post-reference-row b > span[data-zev-wave],
  body:has(.post-detail-page.reference-style) .post-purchase-modal .post-purchase-modal-values > em[data-zev-wave]
) {
  position:relative; isolation:isolate; overflow:hidden; box-sizing:border-box;
  display:inline-grid; place-items:center; padding:0;
  border:1px solid #ffffffe0; border-radius:50%;
  background:linear-gradient(145deg,var(--ball-light) 0%,var(--ball-mid) 48%,var(--ball-deep) 100%);
  color:#18212c; font-family:Arial,"Microsoft YaHei",sans-serif;
  font-size:var(--ball-number-size,14px); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.035em; text-shadow:none;
  box-shadow:inset 0 2px 0 #ffffff66,inset 0 -2px 0 #00000033,0 2px 4px #13213730;
}
:is(
  .home-rebuild .draw-result-home .draw-number:is(.red,.blue,.green),
  .home-rebuild .zev-free-values > .zev-number-chip[data-zev-wave],
  .post-detail-page .post-reference-row b > span[data-zev-wave],
  body:has(.post-detail-page.reference-style) .post-purchase-modal .post-purchase-modal-values > em[data-zev-wave]
)::before {
  content:""; position:absolute; z-index:-1; inset:var(--ball-core-inset,17%);
  border:1px solid #47556961; border-radius:50%; pointer-events:none;
  background:linear-gradient(145deg,#fff 0%,#f8fafc 64%,#d9e1ea 100%);
  box-shadow:inset 0 1px 1px #fffffff5,inset 0 -1px 2px #47556933,0 1px 1px #0f172a3d;
}
:is(
  .home-rebuild .draw-result-home .draw-number:is(.red,.blue,.green),
  .home-rebuild .zev-free-values > .zev-number-chip[data-zev-wave],
  .post-detail-page .post-reference-row b > span[data-zev-wave],
  body:has(.post-detail-page.reference-style) .post-purchase-modal .post-purchase-modal-values > em[data-zev-wave]
)::after {
  content:""; position:absolute; z-index:-1; top:8%; left:13%; width:22%; height:15%;
  border-radius:50%; transform:rotate(-32deg); pointer-events:none;
  background:linear-gradient(160deg,#fffffff2,#ffffff1a);
  box-shadow:0 0 2px #ffffff47;
}

.home-rebuild .draw-result-home .draw-number { --ball-core-inset:20%; --ball-number-size:20px; }
.home-rebuild .zev-free-values > .zev-number-chip[data-zev-wave],
.post-detail-page .post-reference-row b > span[data-zev-wave] {
  --ball-core-inset:12%; --ball-number-size:13px;
  width:26px; min-width:26px; height:26px; margin:2px 1px; vertical-align:middle;
}
body:has(.post-detail-page.reference-style) .post-purchase-modal .post-purchase-modal-values > em[data-zev-wave] {
  --ball-core-inset:17%; --ball-number-size:15px;
  width:34px; min-width:34px; height:34px; flex:0 0 34px;
}
.post-detail-page .post-reference-row b > .post-hit-value[data-zev-wave] { outline:2px solid #b98720; outline-offset:1px; }
@media(min-width:821px) and (max-width:1000px) {
  .home-rebuild .draw-result-home .draw-number { --ball-number-size:18px; }
}
@media(max-width:820px) {
  .home-rebuild .draw-result-home .draw-number { --ball-core-inset:16%; --ball-number-size:clamp(13px,3.7vw,18px); }
}
