/* BOJIE v0.12.0 — probe-driven 750 × 1334 reference theme */
:root {
  --green: #20aa82;
  --green-dark: #138f70;
  --green-soft: #eaf8f4;
  --green-pale: #f4fbf8;
  --text: #303434;
  --muted: #777d7b;
  --subtle: #a2a7a5;
  --line: #e4e7e6;
  --bg: #f4f5f5;
  --surface: #fff;
  --red: #e34c4c;
  --orange: #f5a000;
  --shadow: 0 .04rem .18rem rgba(25, 64, 53, .10);
  background: #e3e3e3;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

html {
  width: 7.5rem;
  min-width: 0;
  min-height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background: #e3e3e3;
}

body {
  width: 7.5rem;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #fff;
  font-size: .24rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.portal-view,
.portal-content {
  width: 7.5rem;
  max-width: none;
  margin: 0;
}

.portal-view {
  min-height: 100svh;
  padding-bottom: calc(1.02rem + env(safe-area-inset-bottom));
  border: 0;
  background: #fff;
  box-shadow: 0 0 .14rem rgba(0, 0, 0, .08);
}

.portal-content {
  min-height: calc(100svh - 1.02rem);
  background: #fff;
}

/* Header */
.site-header {
  height: calc(.86rem + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) .18rem 0;
  border-bottom: .01rem solid #e5e7e6;
  background: #fff;
}
.brand-logo { gap: .10rem; }
.brand-symbol {
  width: .58rem;
  height: .58rem;
  border-radius: 46% 42% 48% 38%;
  box-shadow: none;
  font-size: .30rem;
}
.brand-name strong { color: #178b6c; font-size: .30rem; line-height: .30rem; letter-spacing: .02em; }
.brand-name small { margin-top: .02rem; color: #2b8c72; font-size: .13rem; line-height: .14rem; letter-spacing: .06em; }
.search-button { width: .70rem; gap: 0; color: #3d4744; font-size: .17rem; }
.search-button i { width: .28rem; height: .28rem; border-width: .045rem; }
.search-button i::after { width: .13rem; height: .045rem; right: -.11rem; bottom: -.06rem; }

/* Home */
.hero-banner {
  height: 1.64rem;
  margin: .20rem .20rem .06rem;
  border-radius: .14rem;
  box-shadow: none;
}
.hero-banner::after { opacity: .14; }
.hero-copy { max-width: 55%; padding: .22rem 0 0 .28rem; }
.hero-copy small { font-size: .12rem; }
.hero-copy strong { margin-top: .08rem; font-size: .30rem; line-height: 1.08; }
.hero-copy p { margin-top: .06rem; font-size: .13rem; }
.carousel-dots { gap: .05rem; bottom: .07rem; }
.carousel-dots i { width: .06rem; height: .06rem; }
.carousel-dots i.active { width: .17rem; }

.notice-bar {
  height: .54rem;
  grid-template-columns: .38rem minmax(0, 1fr) .46rem;
  gap: .05rem;
  padding: 0 .13rem 0 .18rem;
  border-bottom: 0;
  font-size: .18rem;
}
.notice-speaker,
.notice-speaker svg { width: .34rem; height: .34rem; }
.notice-message { font-size: .18rem; font-weight: 500; }
.notice-mail,
.notice-mail svg { width: .38rem; height: .38rem; }

.jackpot-banner {
  height: 1.40rem;
  margin: 0 .16rem;
  border-bottom: 0;
  background: #fff;
}
.jackpot-banner > img { object-fit: cover; animation-duration: 11s; }
.jackpot-banner::before { opacity: .55; }
.jackpot-copy { width: 48%; left: 26%; top: .16rem; }
.jackpot-copy small { font-size: .12rem; }
.jackpot-copy strong {
  margin-top: .06rem;
  padding: .02rem .10rem;
  border-width: .035rem;
  border-radius: .24rem;
  box-shadow: 0 .02rem 0 #08745a;
  font-size: .28rem;
}
.jackpot-copy span { display: none; }

.home-actions {
  grid-template-columns: 38% minmax(0, 1fr);
  min-height: .92rem;
  border-bottom: .01rem solid var(--line);
}
.account-strip {
  min-height: .92rem;
  padding: .09rem .14rem;
}
.account-strip.guest { gap: .10rem; }
.account-strip.signed-in { gap: .03rem; padding-left: .18rem; }
.account-login,
.account-register {
  height: .50rem;
  border-width: .015rem !important;
  border-radius: .08rem;
  font-size: .20rem;
}
.account-name { gap: .07rem; }
.account-name strong { font-size: .17rem; }
.account-chevron { border-top-width: .08rem; border-right-width: .07rem; border-left-width: .07rem; }
.account-copy { width: .30rem; height: .30rem; flex-basis: .30rem; padding: .02rem; }
.account-copy svg { width: .25rem; height: .25rem; }
.account-balance {
  height: .36rem;
  min-height: .36rem;
  grid-template-columns: .26rem minmax(.55rem, max-content) .28rem;
  column-gap: .03rem;
  padding: 0 .04rem;
  border-width: .01rem;
  border-radius: .18rem;
}
.account-balance .tether-icon,
.account-balance .tether-icon img { width: .24rem; height: .24rem; }
.account-balance .balance-value { min-width: .54rem; height: .31rem; padding: 0 .01rem; }
.account-balance .balance-value strong { font-size: .19rem; }
.account-balance .balance-value::after { height: .01rem; right: .02rem; bottom: .015rem; left: .02rem; }
.account-balance .balance-refresh,
.account-balance .balance-refresh-control { width: .27rem; height: .27rem; }
.account-balance .balance-refresh-control::after { font-size: .28rem; line-height: .27rem; }

.utility-bar {
  min-height: .92rem;
  padding: .08rem .02rem .04rem;
}
.utility-item {
  min-height: .78rem;
  grid-template-rows: .40rem .28rem;
  gap: .02rem;
  font-size: .18rem;
}
.utility-item i,
.utility-item .utility-icon svg { width: .39rem; height: .39rem; }
.utility-item .utility-icon img { width: .38rem; height: .36rem; }
.utility-item > span { height: .28rem; padding: 0; line-height: .24rem; font-size: .18rem; }

.lobby-layout {
  grid-template-columns: 1.48rem minmax(0, 1fr);
  min-height: 5.8rem;
}
.side-categories { padding: .04rem .10rem .20rem; background: #fbfdfc; }
.side-categories button {
  height: .68rem;
  gap: .11rem;
  margin: .08rem 0;
  padding: 0 .12rem;
  border-radius: .11rem;
  box-shadow: 0 .02rem .08rem rgba(15, 117, 87, .05);
  font-size: .21rem;
}
.side-categories .category-icon { width: .30rem; flex-basis: .30rem; font-size: .25rem; }
.side-categories .category-slots { font-size: .17rem; }
.side-categories button.active::after { width: .035rem; height: .30rem; }
.lobby-main { padding: 0 .14rem 0 .20rem; }
.lobby-tabs { height: .66rem; border-bottom-width: .01rem; }
.lobby-tabs button { font-size: .20rem; }
.lobby-tabs button.active::after { height: .03rem; left: 30%; right: 30%; }
.game-grid { gap: .18rem .15rem; padding-top: .17rem; }
.game-item { font-size: .18rem; }
.game-thumb { border-radius: .13rem; box-shadow: 0 .02rem .08rem rgba(17, 70, 55, .10); }
.game-item strong { margin-top: .07rem; }

/* Bottom navigation */
.bottom-nav {
  width: 7.5rem;
  height: calc(1.02rem + env(safe-area-inset-bottom));
  right: auto;
  left: 50%;
  padding: .03rem .08rem env(safe-area-inset-bottom);
  border-top: .01rem solid #e0e3e2;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .985);
}
.bottom-nav button { gap: 0; font-size: .21rem; line-height: .26rem; }
.bottom-nav .nav-icon { width: .48rem; height: .48rem; }
.bottom-nav .nav-icon svg { width: .40rem; height: .40rem; stroke-width: 1.8; }
.bottom-nav .nav-withdraw svg { width: .36rem; height: .36rem; }
.bottom-nav .nav-badge {
  min-width: .62rem;
  height: .24rem;
  left: .32rem;
  top: -.04rem;
  padding: 0 .05rem;
  border-radius: .03rem .07rem .07rem .03rem;
  font-size: .14rem;
  line-height: .24rem;
}
.bottom-nav .nav-badge::before { left: -.07rem; top: .06rem; border-top-width: .06rem; border-right-width: .08rem; border-bottom-width: .06rem; }
.bottom-nav .guest-login-nav .nav-badge { display: none; }

/* Dialogs and auth */
.dialog {
  width: 7.5rem;
  right: auto;
  left: 50%;
  padding: .20rem;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(.025rem);
}
.dialog-card {
  width: 5.23rem;
  max-height: calc(100svh - .9rem);
  padding: .20rem .22rem .22rem;
  border-radius: .15rem;
  box-shadow: 0 .08rem .34rem rgba(0, 0, 0, .28);
}
.auth-dialog-card { width: 5.23rem; padding: .16rem .22rem .20rem; border-radius: .15rem; }
.auth-dialog-card > .dialog-close {
  width: .42rem;
  height: .42rem;
  top: calc(100% + .22rem);
  border-width: .025rem;
  font-size: .30rem;
}
.auth-modal { max-height: calc(100svh - 1.4rem); padding: 0; }
.modal-brand { min-height: .70rem; gap: .08rem; }
.modal-brand-mark { width: .48rem; height: .48rem; font-size: .25rem; }
.modal-brand strong { font-size: .25rem; }
.modal-brand small { margin-top: 0; font-size: .10rem; }
.modal-banner { height: 1.25rem; aspect-ratio: auto; margin-top: .04rem; border-radius: .06rem; }
.auth-tabs { margin-top: .08rem; border-bottom-width: .01rem; }
.auth-tabs button { height: .52rem; font-size: .20rem; }
.auth-tabs button.active::after { height: .025rem; left: 35%; right: 35%; }
.auth-form { padding-top: .08rem; }
.auth-caption { margin: 0 0 .05rem; font-size: .15rem; }
.auth-input {
  height: .52rem;
  margin-top: .10rem;
  padding: 0 .10rem;
  border-width: .01rem;
  border-radius: .05rem;
}
.auth-input:focus-within { box-shadow: 0 0 0 .025rem rgba(32, 167, 123, .08); }
.auth-input i { width: .28rem; }
.auth-input i svg { width: .24rem; height: .24rem; }
.auth-input b { margin: 0 .04rem 0 .01rem; font-size: .15rem; }
.auth-input input { font-size: .17rem; }
.password-toggle { width: .38rem; height: .38rem; font-size: .22rem; }
.password-rules { gap: .04rem .10rem; margin-top: .07rem; font-size: .12rem; }
.remember-row { gap: .06rem; margin-top: .10rem; font-size: .15rem; }
.remember-row input { width: .22rem; height: .22rem; }
.form-error { margin-top: .07rem; font-size: .14rem; }
.auth-modal .primary-button { height: .52rem; margin-top: .12rem; border-radius: .05rem; box-shadow: none; font-size: .19rem; }
.auth-links { margin-top: .10rem; }
.auth-links button { font-size: .14rem; }
.forgot-password-dialog-card { width: 5.23rem; }
.forgot-password-dialog { padding: .10rem .08rem .04rem; }
.forgot-password-dialog > p { margin: .12rem 0; font-size: .16rem; line-height: 1.5; }
.secondary-auth-button { width: 100%; height: .48rem; margin-top: .10rem; border: .01rem solid var(--green); border-radius: .05rem; color: var(--green); background: #fff; font-size: .17rem; }

/* More menu */
.dialog.more-menu-overlay {
  display: block;
  padding: 0;
  background: rgba(0, 0, 0, .20);
  backdrop-filter: none;
}
.more-menu-dialog-card {
  width: 4.12rem;
  max-height: calc(100svh - var(--more-menu-top, 3rem) - 1.1rem);
  position: absolute;
  top: var(--more-menu-top, 3.05rem);
  right: var(--more-menu-right, .12rem);
  left: auto;
  padding: .16rem .08rem .18rem;
  border: .01rem solid #dfe3e1;
  border-radius: .10rem;
  overflow: auto;
  background: #fff;
  box-shadow: 0 .06rem .20rem rgba(25, 56, 47, .17);
}
.more-menu-dialog-card > .dialog-close { display: none; }
.more-feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; row-gap: .15rem; }
.more-feature-grid button { min-height: .68rem; gap: .04rem; padding: 0; font-size: .16rem; line-height: .19rem; }
.more-feature-grid button i,
.more-feature-grid button img,
.more-feature-svg,
.more-feature-svg svg { width: .37rem; height: .34rem; }
.more-feature-grid button[data-more-feature="lucky-wheel"] i,
.more-feature-grid button[data-more-feature="lucky-wheel"] img { width: .38rem; height: .38rem; }
.more-feature-grid button[data-more-feature="lucky-wheel"] i::before { width: .40rem; height: .40rem; inset: -.01rem; }
.more-feature-grid button span { max-width: .72rem; min-height: .38rem; }

/* Profile */
.profile-head { min-height: 1.70rem; padding: .20rem .18rem .14rem; background: #fff; }
.profile-back { width: .38rem; height: .38rem; left: .08rem; top: .10rem; font-size: .38rem; }
.profile-head-actions { right: .10rem; top: .10rem; gap: .09rem; }
.profile-head-actions button { width: .36rem; height: .36rem; }
.profile-head-actions svg { width: .31rem; height: .31rem; }
.profile-login-row { min-height: 1.15rem; gap: .14rem; padding-top: .20rem; }
.profile-avatar,
.profile-avatar-user { width: .70rem; height: .70rem; }
.profile-avatar-button { width: .78rem; height: .78rem; }
.profile-avatar-user.avatar-photo { overflow: visible; background: transparent; box-shadow: none; }
.profile-avatar-user.avatar-photo > img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.profile-identity strong { font-size: .21rem; }
.profile-account-line { font-size: .16rem; }
.profile-account-line.profile-id-line { margin-top: .05rem; }
.profile-copy-button { width: .25rem; height: .25rem; }
.profile-balance-link { font-size: .16rem; }
.profile-buttons button { height: .46rem; padding: 0 .20rem; font-size: .17rem; }
.profile-quick { min-height: .90rem; padding: .08rem .22rem; }
.profile-quick button { min-height: .68rem; }
.profile-quick i { width: .45rem; height: .40rem; }
.profile-quick i svg { width: .39rem; height: .39rem; }
.profile-quick button span { font-size: .18rem; }
.profile-quick em { font-size: .12rem; }
.vip-card { min-height: 1.15rem; margin: .10rem .14rem; border-radius: .08rem; }
.profile-menu { margin-top: .10rem; }
.profile-menu + .profile-menu { margin-top: .10rem; }
.profile-menu button { min-height: .60rem; gap: .13rem; padding: 0 .22rem; font-size: .19rem; border-bottom-width: .01rem; }
.profile-menu button i { width: .34rem; height: .34rem; flex-basis: .34rem; }
.profile-menu button i svg { width: .32rem; height: .32rem; }
.profile-menu button span { font-size: .15rem; }
.profile-menu button::after { font-size: .28rem; }

/* Avatar gallery */
.avatar-picker-dialog-card { width: 5.86rem; padding: .12rem .14rem .14rem; border-radius: .08rem; }
.avatar-picker-dialog-card > .dialog-close { width: .40rem; height: .40rem; right: .08rem; top: .06rem; font-size: .28rem; }
.avatar-picker-dialog { min-height: 8.52rem; }
.avatar-picker-titlebar h2 { height: .48rem; margin: 0; text-align: center; font-size: .21rem; font-weight: 500; }
.avatar-gender-tabs { height: .38rem; display: flex; justify-content: center; gap: .12rem; margin-bottom: .16rem; }
.avatar-gender-tabs button { min-width: .58rem; padding: 0 .18rem; border: .01rem solid #dfe5e2; border-radius: .18rem; color: #8a908e; background: #fff; font-size: .16rem; }
.avatar-gender-tabs button.active { border-color: var(--green); color: #fff; background: var(--green); }
.avatar-picker-grid {
  width: 5.24rem;
  max-height: 6.43rem;
  grid-template-columns: repeat(4, .80rem);
  gap: .34rem .68rem;
  margin: 0 auto;
  padding: .04rem .02rem .20rem;
  overflow-y: auto;
}
.avatar-choice { width: .80rem; height: .80rem; border-width: .01rem; }
.avatar-choice .profile-avatar { width: .76rem; height: .76rem; }
.avatar-choice.active { border-color: var(--green); }
.avatar-choice.active::after { width: .20rem; height: .20rem; right: -.03rem; bottom: -.02rem; border-width: .02rem; font-size: .11rem; }
.avatar-picker-save { width: 100%; height: .48rem; margin-top: auto; border: 0; border-radius: .04rem; color: #fff; background: var(--green); font-size: .18rem; }

/* VIP and finance pages compact to the captured geometry */
.offer-navigation,
.simple-title,
.finance-topbar,
.profile-info-header { min-height: .66rem; }
.offer-top-tabs { height: .66rem; }
.offer-top-tabs button,
.finance-main-tabs button { font-size: .18rem; }
.vip-system-page,
.finance-page,
.profile-info-page,
.withdraw-pin-page { min-height: calc(100svh - 1.02rem); background: #f5f6f6; }
.vip-current-card { min-height: 1.18rem; }
.vip-rewards-card { margin-top: .08rem; }
.vip-level-row { font-size: .17rem; }
.finance-page .field,
.finance-card,
.panel { border-radius: .06rem; box-shadow: none; }

/* Lucky wheel */
.lucky-wheel-page { min-height: calc(100svh - 1.02rem); padding-bottom: .30rem; overflow: hidden; background: linear-gradient(#d8f3ff 0%, #dff6ff 58%, #fff 82%); }
.lucky-page-tabs {
  height: .66rem;
  display: grid;
  grid-template-columns: .48rem repeat(5, minmax(0, 1fr));
  position: sticky;
  z-index: 12;
  top: 0;
  align-items: stretch;
  border-bottom: .01rem solid #e2e5e4;
  background: #fff;
}
.lucky-page-tabs button { position: relative; padding: 0 .02rem; border: 0; color: #303534; background: transparent; font-size: .17rem; white-space: nowrap; }
.lucky-page-tabs .lucky-back { font-size: .42rem; font-weight: 300; }
.lucky-page-tabs button.active { color: var(--green); }
.lucky-page-tabs button.active::after { height: .03rem; position: absolute; right: .16rem; bottom: 0; left: .16rem; border-radius: .02rem; background: var(--green); content: ""; }
.lucky-value-card {
  height: .72rem;
  display: grid;
  grid-template-columns: 1.12rem minmax(0, 1fr) .92rem;
  align-items: center;
  gap: .10rem;
  margin: .18rem .20rem .16rem;
  padding: 0 .14rem;
  border-radius: .10rem;
  background: #fff;
  box-shadow: 0 .02rem .06rem rgba(45, 135, 165, .08);
}
.lucky-value { display: flex; align-items: center; gap: .06rem; }
.lucky-value img { width: .31rem; height: .31rem; }
.lucky-value strong { font-size: .18rem; font-weight: 500; }
.lucky-value button { width: .30rem; height: .30rem; padding: 0; border: 0; color: var(--green); background: transparent; font-size: .28rem; }
.lucky-value-copy { color: #9a9f9d; text-align: right; font-size: .16rem; }
.lucky-value-copy b { color: #555; font-weight: 500; }
.lucky-value-copy i { width: .24rem; height: .24rem; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; }
.lucky-value-card > button { height: .42rem; border: 0; border-radius: .08rem; color: #fff; background: var(--green); font-size: .17rem; }
.lucky-tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .18rem; margin: 0 .40rem .12rem; }
.lucky-tier-row button { min-height: .66rem; padding: .07rem .04rem; border: .015rem solid #1684ff; border-radius: .08rem; color: #1684ff; background: rgba(255,255,255,.12); }
.lucky-tier-row button:nth-child(2) { border-color: #ffad00; color: #f3a000; }
.lucky-tier-row button:nth-child(3) { border-color: #a752ff; color: #a752ff; }
.lucky-tier-row button.active { color: #fff; background: #1684ff; }
.lucky-tier-row strong,
.lucky-tier-row span { display: block; font-size: .16rem; font-weight: 500; line-height: .22rem; }
.lucky-spin-options { display: flex; justify-content: center; gap: .40rem; position: relative; z-index: 4; }
.lucky-spin-options button { min-width: 1.12rem; height: .40rem; display: flex; align-items: center; justify-content: center; gap: .06rem; padding: 0 .10rem; border: .015rem solid #1684ff; border-radius: .22rem; color: #1684ff; background: rgba(255,255,255,.62); font-size: .16rem; }
.lucky-spin-options button i { width: .22rem; height: .22rem; border: .015rem solid currentColor; border-radius: 50%; background: #fff; }
.lucky-spin-options button.active { color: #fff; background: #1684ff; }
.lucky-spin-options button.active i::after { width: .10rem; height: .06rem; display: block; margin: .05rem .04rem; border-bottom: .025rem solid #1684ff; border-left: .025rem solid #1684ff; content: ""; transform: rotate(-45deg); }
.lucky-stage { height: 6.55rem; position: relative; margin-top: -.05rem; overflow: hidden; }
.lucky-rays { position: absolute; inset: 0; background: repeating-conic-gradient(from -15deg at 50% 60%, rgba(255,255,255,.00) 0 12deg, rgba(255,255,255,.34) 12deg 18deg); opacity: .7; }
.lucky-wheel-wrap { width: 5.10rem; height: 5.10rem; position: absolute; z-index: 4; top: .45rem; left: 50%; transform: translateX(-50%); }
.lucky-wheel-disc {
  --wheel-rotation: 0deg;
  width: 4.84rem;
  height: 4.84rem;
  position: absolute;
  left: .13rem;
  top: .21rem;
  border: .15rem solid #e9edf3;
  border-radius: 50%;
  background: #075ed2;
  box-shadow: inset 0 0 0 .07rem #4fb7ff, inset 0 0 0 .13rem #0052bf, 0 .06rem .16rem rgba(0, 64, 150, .35);
  transform: rotate(var(--wheel-rotation));
  transition: transform 4.3s cubic-bezier(.12,.67,.08,1);
}
.lucky-wheel-disc.spinning { will-change: transform; }
.lucky-wheel-sectors { position: absolute; inset: .13rem; border-radius: 50%; background: conic-gradient(from -18deg, #0b7cf3 0 36deg, #24b8f7 36deg 72deg, #126de2 72deg 108deg, #20a8ee 108deg 144deg, #0b7cf3 144deg 180deg, #24b8f7 180deg 216deg, #126de2 216deg 252deg, #20a8ee 252deg 288deg, #0b7cf3 288deg 324deg, #24b8f7 324deg 360deg); box-shadow: inset 0 0 .18rem rgba(255,255,255,.5); }
.lucky-wheel-sectors::after { position: absolute; inset: .88rem; border: .10rem solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(5, 92, 207, .35); content: ""; }
.lucky-prize { width: 1.00rem; height: 1.96rem; display: flex; position: absolute; z-index: 3; top: .30rem; left: calc(50% - .50rem); flex-direction: column; align-items: center; gap: .12rem; color: #fff; text-shadow: 0 .02rem .03rem rgba(0,0,0,.28); transform: rotate(var(--prize-angle)); transform-origin: 50% 2.12rem; }
.lucky-prize span { font-family: Arial, sans-serif; font-size: .20rem; font-weight: 700; }
.lucky-prize img { width: .36rem; height: .36rem; object-fit: contain; }
.lucky-pointer { width: 1.08rem; height: 1.42rem; position: absolute; z-index: 9; top: -.02rem; left: 50%; transform: translateX(-50%); }
.lucky-pointer::before { position: absolute; inset: 0; clip-path: polygon(50% 0, 76% 22%, 64% 100%, 36% 100%, 24% 22%); background: linear-gradient(90deg, #d5dbe0, #fff 46%, #aab4bc 52%, #eef2f4); filter: drop-shadow(0 .03rem .04rem rgba(0,0,0,.22)); content: ""; }
.lucky-pointer i { width: .43rem; height: .43rem; position: absolute; left: 50%; top: .10rem; border: .05rem solid #d9ecff; border-radius: .08rem; background: linear-gradient(145deg,#48b9ff,#075fd2); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 .06rem #fff; }
.lucky-spin-button { width: 1.22rem; height: 1.22rem; display: grid; position: absolute; z-index: 10; top: 2.00rem; left: 50%; place-content: center; padding: 0; border: .10rem solid #bac3cc; border-radius: 50%; color: #fff; background: linear-gradient(#26b9fb,#075dcc); box-shadow: inset 0 0 .08rem rgba(255,255,255,.9), 0 .03rem .08rem rgba(0,0,0,.28); transform: translateX(-50%); }
.lucky-spin-button small { font-size: .18rem; }
.lucky-spin-button strong { font-size: .26rem; }
.lucky-spin-button:disabled { filter: saturate(.75); }
.lucky-rivet { width: .07rem; height: .07rem; position: absolute; z-index: 5; border-radius: 50%; background: #fff; box-shadow: 0 0 .07rem #fff; }
.lucky-rivet.r1 { left: 50%; top: .03rem; }.lucky-rivet.r2 { right: .36rem; top: .58rem; }.lucky-rivet.r3 { right: .04rem; top: 50%; }.lucky-rivet.r4 { right: .36rem; bottom: .58rem; }
.lucky-rivet.r5 { left: 50%; bottom: .03rem; }.lucky-rivet.r6 { left: .36rem; bottom: .58rem; }.lucky-rivet.r7 { left: .04rem; top: 50%; }.lucky-rivet.r8 { left: .36rem; top: .58rem; }
.lucky-platform { width: 5.55rem; height: 1.08rem; position: absolute; z-index: 2; bottom: .16rem; left: 50%; border-radius: 50%; background: linear-gradient(#f7fbff,#87bffd 42%,#2c6fc9 43%,#edf8ff 72%,#75aeea); box-shadow: 0 .05rem .12rem rgba(0,85,175,.24); transform: translateX(-50%); }
.lucky-platform::before { width: 3.80rem; height: .72rem; position: absolute; left: 50%; bottom: .45rem; border-radius: 50%; background: repeating-linear-gradient(90deg,#f6b900 0 .16rem,#ffe073 .16rem .28rem); box-shadow: 0 0 .12rem #ffc72e; content: ""; transform: translateX(-50%); }
.lucky-platform i { width: .52rem; height: .52rem; position: absolute; z-index: 2; bottom: .48rem; border-radius: .08rem; background: linear-gradient(135deg,#eaf6ff,#6aa8f6 44%,#176bd4 46%,#c8e5ff); box-shadow: inset 0 0 0 .03rem rgba(255,255,255,.65), 0 .03rem .06rem rgba(0,70,150,.22); }
.lucky-platform i:nth-child(1){left:.45rem;transform:rotate(-12deg)}.lucky-platform i:nth-child(2){left:1.18rem;bottom:.66rem;transform:rotate(8deg)}.lucky-platform i:nth-child(3){right:1.18rem;bottom:.65rem;transform:rotate(-8deg)}.lucky-platform i:nth-child(4){right:.45rem;transform:rotate(12deg)}.lucky-platform i:nth-child(5){left:2.50rem;bottom:.58rem;transform:rotate(4deg)}
.lucky-record-card { position: relative; z-index: 5; margin: -.12rem .20rem .20rem; border-radius: .10rem; background: #fff; box-shadow: 0 .02rem .10rem rgba(30,90,110,.10); }
.lucky-record-card nav { height: .56rem; display: grid; grid-template-columns: 1fr 1fr; border-bottom: .01rem solid var(--line); }
.lucky-record-card nav button { border: 0; background: transparent; font-size: .18rem; }
.lucky-record-card nav button.active { color: var(--green); }
.lucky-empty { height: 1.42rem; display: grid; place-items: center; color: #a0a5a3; font-size: .16rem; }
.lucky-empty img { width: .58rem; height: .58rem; object-fit: contain; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .lucky-wheel-disc { transition-duration: .01ms; }
}

/* v0.12.0 final compatibility guards */
.more-feature-grid button[data-more-feature="lucky-wheel"] i::after { display: none !important; }
.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  clip-path: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain;
}