, so each is the first of ITS type and a
:not(:first-of-type) rule skips both. */
#app .login__container-heading__title,
#app .resgister__C-heading__title {
font-size: 30px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.4px;
text-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}
#app .login__container-heading__subTitle,
#app .resgister__C-heading__subTitle,
#app .login__container-heading__subTitle > div,
#app .resgister__C-heading__subTitle > div {
font-size: 13px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
color: var(--bx-text-mid) !important;
letter-spacing: 0 !important;
text-shadow: none;
}
#app .login__container-heading__subTitle,
#app .resgister__C-heading__subTitle {
max-width: 32ch;
margin: 8px auto 0 !important;
}
/* ---------------------------------------------------------------------------
4. THE SHEET
The tab row and the form are siblings, not wrapped together, so the sheet is
built from both: the tab row supplies the rounded top edge and the handle,
the form continues the same surface to the bottom of the screen.
--------------------------------------------------------------------------- */
/* Solid, not glass: the form below is solid, and a translucent top half made
the join between the two halves of the sheet read as a visible band. */
#app .login_container-tab {
position: relative;
z-index: 2;
margin-top: -26px;
padding-top: 20px !important;
height: auto !important;
background: var(--bx-surface) !important;
border: 1px solid var(--bx-hairline-2);
border-bottom: none;
border-radius: var(--bx-r-xl) var(--bx-r-xl) 0 0;
box-shadow: 0 -14px 44px rgba(0, 0, 0, .55);
}
/* Grab handle. */
#app .login_container-tab::before {
content: "";
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 4px;
border-radius: 99px;
background: rgba(255, 255, 255, .22);
}
/* The bundle puts a 28px top margin on the form. Between the tab row and the
form that margin let the page ground show through as a dark band across the
sheet, so it moves to padding and the two halves become one surface. */
#app .login__container-form,
#app .resgister__C-form {
position: relative;
z-index: 2;
flex: 1;
height: auto !important;
margin-top: 0 !important;
padding-top: 22px !important;
background: var(--bx-surface) !important;
border-left: 1px solid var(--bx-hairline-2);
border-right: 1px solid var(--bx-hairline-2);
padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
#app .tab-content,
#app .tab-content.activecontent,
#app .signIn__container,
#app .register__container {
height: auto !important;
background: transparent !important;
color: var(--bx-text-hi) !important;
}
/* ---------------------------------------------------------------------------
5. TAB SWITCHER inside the sheet — pill segments, not underlined text
--------------------------------------------------------------------------- */
#app .login_container-tab .tab {
height: auto !important;
padding: 11px 8px !important;
margin: 0 6px;
border-radius: 999px;
/* The bundle marks the active tab with a 1px bottom border. Against the pill
radius that border wrapped into a stray curve, and the pill already carries
the state, so it goes. */
border: none !important;
color: var(--bx-text-lo) !important;
font-weight: 600;
transition: color var(--bx-mid) var(--bx-ease),
background var(--bx-mid) var(--bx-ease);
}
#app .login_container-tab .tab.active,
#app .login_container-tab .tab.activetab {
color: var(--bx-text-hi) !important;
background: rgba(var(--bx-primary-rgb), .14);
}
#app .login_container-tab .tab.active svg,
#app .login_container-tab .tab.activetab svg {
color: var(--bx-primary) !important;
filter: drop-shadow(0 2px 8px rgba(var(--bx-primary-rgb), .55));
}
/* Kill the old underline - the pill carries the state now. */
#app .login_container-tab .tab::after,
#app .login_container-tab .tab.active::after {
display: none !important;
}
/* Register shows a single label rather than a switcher; centre it. */
#app .resgister__C-form .login_container-tab .tab,
#app .resgister__C .login_container-tab .tab {
background: transparent;
}
/* ---------------------------------------------------------------------------
6. FIELDS — sunken wells with quiet uppercase labels
--------------------------------------------------------------------------- */
#app .phoneInput__container-label,
#app .passwordInput__container-label,
#app .emailInput__container-label,
#app .register__container-invitation__label {
color: var(--bx-text-lo) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .10em;
text-transform: uppercase;
}
#app .phoneInput__container-label svg,
#app .passwordInput__container-label svg,
#app .emailInput__container-label svg,
#app .register__container-invitation__label svg {
color: var(--bx-primary) !important;
}
#app .phoneInput__container-input input,
#app .passwordInput__container-input input,
#app .emailInput__container-input input,
#app .register__container-invitation__input input,
#app .signIn__container input,
#app .register__container input {
background: var(--bx-sunken) !important;
color: var(--bx-text-hi) !important;
border: 1px solid var(--bx-hairline-2) !important;
border-radius: var(--bx-r-md) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .55);
font-size: 14px; /* 15px clipped the longest placeholder on a 375px screen */
transition: border-color var(--bx-fast) var(--bx-ease),
box-shadow var(--bx-fast) var(--bx-ease);
}
#app .phoneInput__container-input input::placeholder,
#app .passwordInput__container-input input::placeholder,
#app .emailInput__container-input input::placeholder,
#app .register__container-invitation__input input::placeholder {
font-size: 13px;
color: var(--bx-text-lo) !important;
opacity: 1;
}
#app .phoneInput__container-input input:focus,
#app .passwordInput__container-input input:focus,
#app .emailInput__container-input input:focus,
#app .register__container-invitation__input input:focus {
border-color: rgba(var(--bx-primary-rgb), .7) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .55),
0 0 0 3px rgba(var(--bx-primary-rgb), .18);
outline: none;
}
#app .passwordInput__container-input .eye,
#app .passwordInput__container-input svg,
#app .phoneInput__container-input svg {
color: var(--bx-text-lo);
}
/* Country-code dropdown. */
#app .dropdown {
background: var(--bx-sunken) !important;
color: var(--bx-text-hi) !important;
border: 1px solid var(--bx-hairline-2) !important;
border-radius: var(--bx-r-md) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .55);
}
#app .dropdown__value { color: var(--bx-text-hi) !important; }
#app .dropdown__list {
background: var(--bx-surface-2) !important;
border: 1px solid var(--bx-hairline-2) !important;
border-radius: var(--bx-r-md) !important;
box-shadow: var(--bx-e3);
overflow: hidden;
}
#app .dropdown__list-item {
color: var(--bx-text-mid) !important;
transition: background var(--bx-fast) var(--bx-ease);
}
#app .dropdown__list-item.active {
background: rgba(var(--bx-primary-rgb), .16) !important;
color: var(--bx-primary) !important;
font-weight: 600;
}
/* ---------------------------------------------------------------------------
7. CHECKBOX + ACTIONS
--------------------------------------------------------------------------- */
#app .login__container .van-checkbox__label,
#app .resgister__C .van-checkbox__label {
color: var(--bx-text-mid) !important;
font-size: 13px;
}
#app .login__container .van-checkbox__icon .van-icon,
#app .resgister__C .van-checkbox__icon .van-icon {
background: var(--bx-sunken) !important;
border-color: var(--bx-hairline-2) !important;
}
#app .login__container .van-checkbox__icon--checked .van-icon,
#app .resgister__C .van-checkbox__icon--checked .van-icon {
background: var(--bx-primary) !important;
border-color: var(--bx-primary) !important;
color: #04150F !important;
}
/* Primary CTA — the one thing to press. */
#app .signIn__container-button button,
#app .register__container-button button,
#app .signUp__container-button button {
background: var(--main_gradient-color) !important;
color: #04150F !important;
border: none !important;
border-radius: 999px !important;
height: 50px !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: .2px;
box-shadow: var(--bx-glow-primary);
transition: transform var(--bx-fast) var(--bx-ease),
box-shadow var(--bx-fast) var(--bx-ease),
filter var(--bx-fast) var(--bx-ease);
}
#app .signIn__container-button button:active,
#app .register__container-button button:active,
#app .signUp__container-button button:active {
transform: translateY(1px) scale(.985);
filter: brightness(.95);
box-shadow: 0 2px 12px rgba(var(--bx-primary-rgb), .3);
}
/* The alternate action drops to a link, so the two no longer compete. */
#app .signIn__container-button button + button,
#app .register__container-button button + button,
#app .signUp__container-button button + button {
background: transparent !important;
color: var(--bx-primary) !important;
border: none !important;
box-shadow: none !important;
height: 44px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(var(--bx-primary-rgb), .45);
}
#app .signIn__container-button button:disabled,
#app .register__container-button button:disabled,
#app .signUp__container-button button:disabled {
background: var(--button_dis_color) !important;
color: var(--bx-text-lo) !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------------------------
8. FOOTER ACTIONS — icon chips
--------------------------------------------------------------------------- */
#app .login__container .font24,
#app .signIn__container .font24 {
color: var(--bx-text-mid) !important;
font-size: 12px !important;
}
#app .login__container .icons > div,
#app .signIn__container .icons > div {
background: rgba(255, 255, 255, .05) !important;
border: 1px solid var(--bx-hairline);
border-radius: 50%;
box-shadow: var(--bx-e1);
transition: transform var(--bx-fast) var(--bx-ease-back),
border-color var(--bx-fast) var(--bx-ease),
background var(--bx-fast) var(--bx-ease);
}
#app .login__container .icons > div:active,
#app .signIn__container .icons > div:active {
transform: scale(.92);
background: rgba(var(--bx-primary-rgb), .14) !important;
border-color: rgba(var(--bx-primary-rgb), .5);
}
#app .login__container .icons svg,
#app .signIn__container .icons svg {
color: var(--bx-primary);
}
/* ---------------------------------------------------------------------------
9. ENTRANCE — the sheet slides up on first paint
Layer 00 turns this off for prefers-reduced-motion.
--------------------------------------------------------------------------- */
#app .login_container-tab,
#app .login__container-form,
#app .resgister__C-form {
animation: bx-sheet-in var(--bx-slow) var(--bx-ease) both;
}
@keyframes bx-sheet-in {
from { transform: translateY(26px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#app .login__container-heading,
#app .resgister__C-heading {
animation: bx-hero-in 520ms var(--bx-ease) both;
}
@keyframes bx-hero-in {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ---- 40-game-semantics.css ---- */
/* ============================================================================
LAYER 40 — GAME COLOUR SEMANTICS (a correction layer, not a redesign)
The owner asked for no changes to the games. This layer exists to KEEP that
promise, not to break it.
The problem: --main-color is not purely a brand colour in this bundle. It
does double duty as the semantic RED used to render losing / red game
results. Remapping it to emerald in /brand/theme.css - which is what darkens
the other 900+ call sites correctly - would silently turn every red result
green, and the game would read wrong to the player.
So each rule below pins a genuinely red-semantic selector back to a real red.
Nothing here changes layout, spacing, size or behaviour. The number balls,
dice faces and result bitmaps are untouched raster art and are not referenced
at all - their colour semantics are baked into the images.
Specificity note: the bundle writes these as `.red[data-v-xxxx]{...!important}`
at (0,2,0). Prefixing with #app gives (1,1,0), and an ID outranks any number
of classes, so these win while still being honest !important-for-!important.
============================================================================ */
/* ---------------------------------------------------------------------------
Game result records — red result numbers and red columns.
--------------------------------------------------------------------------- */
#app .GameRecord__C-body-redC,
#app .GameRecord__C-body .redNumItem,
#app .MyGameRecordList__C-item-l-0 {
color: var(--norm_red-color) !important;
}
/* ---------------------------------------------------------------------------
The generic .red helper. The bundle sets it !important, so this must too.
--------------------------------------------------------------------------- */
#app .red,
#app .TimeLeft__C .box .info .closure .closurtimes .red,
#app .vip-content-empirical > div > p.red,
#app .vip-content-recordVsrule-con .item span.red {
color: var(--norm_red-color) !important;
}
/* Quick-pick red line in the number selector. */
#app .NumberSelectContainer .NumberTabContent .quickcontainer .redline {
color: var(--norm_red-color) !important;
border-color: var(--norm_red-color) !important;
}
/* Expired promo chips read as a warning, not as a brand action. */
#app .Xg-list .item .box .Xg-btn-expired {
color: var(--bx-text-lo) !important;
}
/* ---------------------------------------------------------------------------
Betting board colour chips.
These carry the bet's meaning. They already resolve through --norm_*
variables, which theme.css lifts for dark-background contrast without
changing which colour means what. Listed here so the intent is explicit and
nobody later "simplifies" them into the brand palette.
green -> --norm_green-color #2ED47A
red -> --norm_red-color #FF6B6B
violet -> --norm_Purple-color #C86EFF
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Game surfaces only inherit the dark ground - no restructuring.
The boards, buttons, timers, ball art and layout are left exactly as the
bundle ships them.
--------------------------------------------------------------------------- */
#app .GameRecord__C,
#app .MyGameRecordList__C,
#app .TimeLeft__C {
color: var(--bx-text-hi);
}
/* ---- 50-wallet.css ---- */
/* ============================================================================
LAYER 50 — WALLET, ACCOUNT & PROMOTION
Screens: wallet, recharge/deposit, withdraw, account ("my"), setting centre,
VIP, promotion / invitation / commission, bet records, transaction history.
Layers 00/05/10 already flipped most surfaces dark through the --darkBg /
--darkTextW / --bgDark-2 hooks. This file only handles what those cannot:
the balance card (whose whole look is a baked PNG), the action buttons (no
primary/secondary hierarchy), list rows (no separators, no press state, thin
tap targets), and the few surfaces painted with --textW / --gray-color-1 —
deliberately undefined globally because each is consumed as BOTH text and
surface, so each must be repaired one selector at a time (section 3).
SPECIFICITY. Every bundle rule here is Vue-scoped, e.g.
`.balanceAssets[data-v-98c90f53]` = (0,2,0), so a bare class loses. `#app`
lifts us to (1,1,0), which outranks any number of classes — hence no
!important anywhere in this file.
NOT TOUCHED, on purpose: anything on a game-play screen (betting boards,
number balls, dice, colour buttons, odds chips, timers, result tables) and
the VIP level badge art. VIP gets its *plates* restyled, never its badges.
========================================================================== */
/* ============================================================================
1 — THE BALANCE CARD (the hero)
.TotalAssets__container (account page), .balanceAssets (wallet + withdraw)
and .Recharge__container-balanceAssets (deposit) are the same component
compiled three times. All three paint their whole look with one raster:
TotalAssetsBg-81d648d4.png, with ar-TotalAssetsBg-3e718d2b.png swapped in a
later same-specificity rule for RTL. That PNG is a light-teal artwork baked
at 750px wide — it cannot be recoloured and it blurs on tall phones.
Using the `background` shorthand (not `background-image: none`) kills the
raster AND the RTL override in one declaration, and lets us rebuild the card
from four stacked paint layers, front to back:
a) an inner top highlight, so the card reads as lit from above,
b) a gold glint entering from the trailing edge, picking up the accent,
c) an emerald bloom off the leading corner — the brand note,
d) the emerald-to-charcoal ground the whole card sits on.
A gold hairline plus a large soft drop shadow lift it off the page; the
inset white line on top completes the "polished plate" read.
========================================================================== */
#app .TotalAssets__container,
#app .balanceAssets,
#app .Recharge__container-balanceAssets {
background:
linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 46%),
radial-gradient(80% 120% at 108% 18%, rgba(var(--bx-accent-rgb), .20) 0%, rgba(var(--bx-accent-rgb), 0) 60%),
radial-gradient(120% 150% at 6% -25%, rgba(var(--bx-primary-rgb), .48) 0%, rgba(var(--bx-primary-rgb), 0) 64%),
linear-gradient(158deg, var(--bx-primary-dk) 0%, var(--bx-surface-2) 48%, var(--bx-sunken) 100%);
border: 1px solid rgba(var(--bx-accent-rgb), .26);
border-radius: var(--bx-r-lg);
color: var(--bx-text-hi);
box-shadow:
var(--bx-e3),
0 0 0 1px rgba(0, 0, 0, .40),
inset 0 1px 0 rgba(255, 255, 255, .15);
overflow: hidden;
}
/* The "Wallet" / refresh pill in the card header was a 1px white outline on a
light plate. On the new ground it needs its own glassy fill to stay legible
without competing with the balance figure. */
#app .TotalAssets__container-header__right {
background: rgba(255, 255, 255, .07);
border-color: rgba(var(--bx-accent-rgb), .40);
color: var(--bx-accent-lt);
backdrop-filter: blur(2px);
}
/* The balance figure is the one number on the screen that matters. Warm it
very slightly toward the accent so the eye lands there first. */
#app .TotalAssets__container-main,
#app .balanceAssets__main {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
#app .TotalAssets__container-tip span {
color: var(--bx-accent-lt);
}
/* ============================================================================
2 — DEPOSIT / WITHDRAW ACTIONS
One filled emerald primary, one outlined secondary. The bundle shipped both
states as flat fills with no elevation and no disabled/enabled distinction
beyond a colour swap, so a disabled Recharge button looked clickable.
========================================================================== */
/* --- primary, disabled (the default state of the recharge button) --------- */
#app .Recharge__container-rechageBtn,
#app .RechargeUsdt__container-rechageBtn {
background: var(--bx-surface-2);
/* --textW is undefined globally and is used HERE as a text colour. */
color: var(--bx-text-lo);
border: 1px solid var(--bx-hairline);
box-shadow: none;
transition: background var(--bx-fast) var(--bx-ease),
box-shadow var(--bx-fast) var(--bx-ease),
transform var(--bx-fast) var(--bx-ease);
}
/* --- primary, enabled ----------------------------------------------------- */
#app .rechage_active,
#app .Recharge__box .rechage_active,
#app .RechargeUsdt__container .rechage_active {
background: linear-gradient(180deg, var(--bx-primary-lt) 0%, var(--bx-primary-dk) 100%);
color: #fff;
border-color: transparent;
box-shadow: var(--bx-e2), var(--bx-glow-primary);
}
#app .rechage_active:active,
#app .content .shareBtnContainer .shareBtn:active,
#app .wallet-container-content .container .recycleBtnD .recycleBtn:active {
transform: translateY(1px);
box-shadow: var(--bx-e1);
}
/* --- withdraw confirm pair: outlined secondary + filled primary ----------- */
#app .withdraw__container .pwd .btnD button:nth-of-type(1) {
background: var(--bx-surface-2);
border: 1px solid rgba(var(--bx-primary-rgb), .45);
color: var(--bx-primary-lt);
border-radius: var(--bx-r-md);
}
#app .withdraw__container .pwd .btnD button:nth-of-type(2),
#app .c2cConfirm .btn {
background: linear-gradient(180deg, var(--bx-primary-lt) 0%, var(--bx-primary-dk) 100%);
color: #fff;
border: none;
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2), var(--bx-glow-primary);
}
/* --- share / recycle primaries elsewhere in this family ------------------- */
#app .content .shareBtnContainer .shareBtn,
#app .wallet-container-content .container .recycleBtnD .recycleBtn {
background: linear-gradient(180deg, var(--bx-primary-lt) 0%, var(--bx-primary-dk) 100%);
color: #fff;
box-shadow: var(--bx-e2), var(--bx-glow-primary);
transition: transform var(--bx-fast) var(--bx-ease),
box-shadow var(--bx-fast) var(--bx-ease);
}
#app .wallet-container-content .container .recycleBtnD .recycleBtn.disable {
background: var(--bx-surface-2);
color: var(--bx-text-lo);
box-shadow: none;
}
/* --- deposit amount chips ------------------------------------------------- */
#app .Recharge__content-paymoney__money-list__item,
#app .Recharge__container-paymoney__money-list__item {
background: var(--bx-surface-2);
border-color: var(--bx-hairline);
border-radius: var(--bx-r-sm);
transition: border-color var(--bx-fast) var(--bx-ease),
box-shadow var(--bx-fast) var(--bx-ease);
}
#app .Recharge__content-paymoney__money-list__item.active,
#app .Recharge__container-paymoney__money-list__item.active {
/* the bundle's .active already sets the emerald gradient; add the lift and
repair --textW, which this rule uses as a TEXT colour. */
color: #fff;
box-shadow: var(--bx-e1), var(--bx-glow-primary);
}
/* --- withdraw channel tiles ---------------------------------------------- */
/* .withdrawWay .c2c ships with no background at all, so the C2C row was an
invisible hit area on the dark ground. */
#app .withdrawWay .c2c {
background: var(--bx-surface);
border: 1px solid var(--bx-hairline);
box-shadow: var(--bx-e1);
}
#app .withdrawWay > div:not(.c2c) {
border: 1px solid var(--bx-hairline);
transition: border-color var(--bx-fast) var(--bx-ease);
}
#app .withdrawWay > div.select,
#app .withdrawWay .c2c.active {
border-color: transparent;
box-shadow: var(--bx-e2), var(--bx-glow-primary);
}
/* ============================================================================
3 — UNDEFINED-HOOK REPAIRS
--textW and --gray-color-1 are intentionally never defined globally. Each
selector below consumes one of them, so each is fixed here individually with
the value its own context needs.
========================================================================== */
/* --textW as a SURFACE: the commission-tree panel and the invitation rows. */
#app .subordinate__container-content,
#app .myInvitation__container-content__item {
background-color: var(--bx-surface);
border: 1px solid var(--bx-hairline);
box-shadow: var(--bx-e1);
}
/* --textW as a SURFACE again: the two segmented controls in the history pages
(recharge state filter, withdraw C2C/normal switch). Both track and thumb
read from it, so the whole control was invisible. Track sunken, inactive
segment transparent — the emerald thumb then carries all the contrast. */
#app .rechargeh__container .state_box,
#app .rechargeh__container .c2cType {
background-color: var(--bx-sunken);
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
overflow: hidden;
}
#app .rechargeh__container .state_box .state_item {
background-color: transparent;
color: var(--bx-text-mid);
}
/* --textW as TEXT on the selected segment / selected dropdown option. */
#app .rechargeh__container .state_box .state_item_active,
#app .rechargeh__container .c2cType > div.active,
#app .myInvitation__container-searchbar__selector-dropdown .selected,
#app .myInvitation__container-content__item-header span:first-of-type {
color: #fff;
}
/* --gray-color-1 as TEXT: the withdraw amount placeholder. Undefined, so the
input fell back to the UA's near-black placeholder on a dark field. */
#app .explain .input input::placeholder {
color: var(--bx-text-lo);
}
/* ============================================================================
4 — LIST ROWS: history, settings menu, records
The bundle draws these rows with padding only — no separators, no press
feedback, and rows as short as .53rem. Hairline separators (never a full
border) plus a generous minimum height make them scannable and tappable.
========================================================================== */
#app .settingPanel__container-items__item,
#app .about-container-content-item,
#app .redeem-container-record-item,
#app .subordinate__container-content__item {
border-bottom: 1px solid var(--bx-hairline);
min-height: 1.17333rem; /* ~44px at the bundle's 100px root */
transition: background-color var(--bx-fast) var(--bx-ease);
}
#app .settingPanel__container-items__item:last-child,
#app .about-container-content-item:last-child,
#app .redeem-container-record-item:last-child,
#app .subordinate__container-content__item:last-child {
border-bottom: none;
}
#app .settingPanel__container-items__item:active,
#app .about-container-content-item:active,
#app .serviceCenter__container-items__item:active,
#app .TeamReport__C-body-item:active {
background-color: rgba(255, 255, 255, .045);
}
/* Transaction cards (recharge history, withdraw history). They already get
--darkBg from layer 05; what they lack is edge definition against the page,
which at this density matters more than the fill. */
#app .rechargeh__container-content__item {
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e1);
}
/* Bet-record cards: same treatment. Nothing here touches the result values —
their semantics belong to layer 40. */
#app .bet-container-lottery-card {
border: 1px solid var(--bx-hairline);
border-bottom: none;
box-shadow: var(--bx-e1);
}
/* Account-page panels sit on the same ground as the balance card; a hairline
keeps them from dissolving into it. */
#app .settingPanel__container,
#app .serviceCenter__container,
#app .redeem-container-record,
#app .wallet-container-content .container {
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
}
/* ============================================================================
5 — VIP
The level badges are artwork (bg1..bg10 PNGs plus per-level gradients) and
are deliberately untouched. Only the plates behind and around them are
restyled — the welfare grid, the record/rule pane and the two floating
"experience" chips that overhang the header.
========================================================================== */
#app .vip-content-weal,
#app .vip-content-myWelfare,
#app .vip-content-recordVsrule-con {
background: linear-gradient(180deg, var(--bx-surface-2) 0%, var(--bx-surface) 100%);
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2);
}
#app .vip-content-empirical > div {
background: var(--bx-surface-2);
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2);
}
/* Record / Rule tab pair: the inactive half was a raised light plate. Flatten
it so only the active half — which already carries the emerald underline —
reads as selected. */
#app .vip-content-recordVsrule-head > button {
background: var(--bx-surface);
color: var(--bx-text-mid);
border-bottom: 1px solid var(--bx-hairline);
}
#app .vip-content-recordVsrule-head > button.active {
background: var(--bx-surface-2);
color: var(--bx-primary-lt);
}
#app .vip-content-recordVsrule-con .item {
border-bottom: 1px solid var(--bx-hairline);
padding-bottom: .21333rem;
}
#app .vip-content-recordVsrule-con .con-content__rules-item {
background: var(--bx-surface-2);
border: 1px solid var(--bx-hairline);
}
/* ============================================================================
6 — PROMOTION / INVITATION / COMMISSION
Emerald connector lines down the tree, gold for money.
========================================================================== */
/* .canvas is the vertical run of small SVG nodes that draws the referral tree's
connector. It inherited whatever colour the page happened to carry. */
#app .canvas svg {
color: var(--bx-primary);
opacity: .85;
}
#app .content .commission {
background-color: var(--bx-surface);
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2);
}
#app .content .commission__title svg {
color: var(--bx-primary-lt);
}
/* Earnings figures in gold: the top line of each commission stat, the team
report's commission column, and the total-commission pill. */
#app .content .commission__body > div span:first-of-type,
#app .TeamReport__C-body-item-detail-commission span,
#app .TeamReportDetail__C-head-detail-commission span,
#app .TeamReportDetail__C-body-item span.meony {
color: var(--bx-accent);
}
#app .container .amount_txt {
background: rgba(var(--bx-accent-rgb), .12);
border: 1px solid rgba(var(--bx-accent-rgb), .30);
color: var(--bx-accent-lt);
}
#app .TeamReport__C-body-item,
#app .TeamReportDetail__C-body-item {
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
}
#app .TeamReport__C-body .header-container {
background-color: var(--bx-surface-2);
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
}
#app .TeamReport__C-body .header-container .num {
color: var(--bx-accent);
}
/* The two-column invite summary: its inner divider was a light rule. */
#app .container .info_content {
border: 1px solid var(--bx-hairline);
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2);
}
#app .container .info_content .info .line3.r {
border-right-color: var(--bx-hairline-2);
}
#app .container .info_content .info .head.u2 {
border-left-color: rgba(0, 0, 0, .35);
}
/* Invitation search field + its dropdown, which had a light plate and a light
1px frame. */
#app .searchbar-container__searchbar,
#app .myInvitation__container-searchbar__selector > div {
background: var(--bx-surface-2);
border: 1px solid var(--bx-hairline);
color: var(--bx-text-hi);
}
#app .myInvitation__container-searchbar__selector-dropdown {
background: var(--bx-surface-2);
border-color: var(--bx-hairline-2);
box-shadow: var(--bx-e3);
}
/* ============================================================================
7 — ACCOUNT ("my") HEADER
The avatar/UID block sits over the page's gradient header. Its UID pill and
avatar had no edge, so both bled into the header behind them.
========================================================================== */
#app .userInfo__container-content__avatar {
border: 2px solid rgba(var(--bx-accent-rgb), .55);
box-shadow: var(--bx-e2);
}
#app .userInfo__container-content-uid {
background: rgba(0, 0, 0, .28);
border: 1px solid var(--bx-hairline-2);
}
#app .userInfo__container-setting-center {
border: 1px solid var(--bx-hairline);
box-shadow: var(--bx-e2);
}
#app .userInfo__container-setting-center-content {
border-top: 1px solid var(--bx-hairline);
padding-top: .21333rem;
}
/* The unread badge on a settings row is the bundle's only red on this screen;
keep it red but stop it from glowing brighter than the balance figure. */
#app .settingPanel__container-items-right h5 {
box-shadow: none;
}
/* The wallet page's game-balance tiles: hairline + press only. Their layout,
sizing and the emerald .select fill are the bundle's and stay untouched. */
#app .wallet-container-content .gameList > div {
border: 1px solid var(--bx-hairline);
transition: border-color var(--bx-fast) var(--bx-ease);
}
#app .wallet-container-content .gameList > div:active {
border-color: rgba(var(--bx-primary-rgb), .45);
}
#app .wallet-container-content .gameList .select {
border-color: transparent;
box-shadow: var(--bx-glow-primary);
}
/* ---- 55-account-wallet.css ---- */
/* ============================================================================
LAYER 55 — ACCOUNT & WALLET STRUCTURE
Layer 50 recolours these screens. This layer changes their SHAPE: what is on
them, in what order, and how big the tap targets are.
Screens: /#/wallet (page-wallet-887869c0.css, scope data-v-0dabd3fc) and
/#/main (page-main-1d55760d.css, scope data-v-a78765c7).
SPECIFICITY. Every bundle rule here is Vue-scoped, e.g.
`.wallet-container-content[data-v-0dabd3fc]` = (0,2,0). `#app` lifts a single
class to (1,1,0), which outranks any number of classes, so nothing in this
file needs !important. Same technique layer 50 documents.
WHY CSS AND NOT A REWRITE. The wallet and account pages are compiled Vue
render functions; their section order is a fixed Fragment and their menus are
literal arrays in page-main-1907964c.js / page-wallet-caa89548.js. There is no
route table or config to edit. But both page roots are already
`display:flex; flex-direction:column`, so `order:` on their children is a
real, supported way to restructure them without touching the bundle.
VERIFIED SELECTORS. Every selector below was checked against the compiled CSS
before being written here. Confirmed present:
.wallet-container-content[data-v-0dabd3fc] flex column
.wallet-container-content .container[data-v-0dabd3fc] flex column
.wallet-container-content .container .progressBars flex, >div 50%
.wallet-container-content .container .recycleBtnD width 100%
.wallet-container-content .container .userDetail grid, 4 cols
.wallet-container-content .gameList[data-v-0dabd3fc] flex, >div 31%
.userinfo-content[data-v-a78765c7] flex column
NOT YET DONE. The /#/main section order is not set here. That page redirects
to /#/login without a session, so it could not be rendered and measured, and
reordering five child components blind is how you ship a layout regression.
The hooks are in place (see section 3) and want one logged-in pass.
========================================================================== */
/* ============================================================================
1. WALLET — remove what a player never asked for
The wallet opens with two donut charts (deposit vs withdrawal totals), then a
"Main wallet transfer" button, then the four things people actually came for,
then a grid of per-vendor balances. The charts are decoration, the transfer
button exists for a multi-wallet model this install does not use, and the
vendor grid is a list of provider names with 0.00 next to each.
========================================================================== */
#app .wallet-container-content .container .progressBars,
#app .wallet-container-content .container .recycleBtnD,
#app .wallet-container-content .gameList {
display: none;
}
/* ============================================================================
2. WALLET — make the four actions the page
.userDetail is a 4-column grid of Deposit / Withdraw / Deposit history /
Withdrawal history. With the clutter gone it is the primary control, so it
gets room and a real tap target instead of a 1.3rem icon in a wide grid.
========================================================================== */
/* The bundle gives .container a min-height of 340px, sized for the donut charts
and the transfer button that section 1 hides. With those gone the tiles need
about 152px, so the card kept ~160px of empty floor under them and read as a
page that had failed to load. Let it fit what is actually in it. */
#app .wallet-container-content .container {
min-height: 0;
padding-bottom: 0.42667rem;
}
#app .wallet-container-content .container .userDetail {
grid-template-columns: repeat(2, 1fr);
gap: 0.32rem;
margin-top: 0.16rem;
}
#app .wallet-container-content .container .userDetail > div {
/* Row, not column: icon beside the label reads faster at two-up than a
stacked icon with the caption under it. */
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.28rem;
min-height: 1.86667rem; /* ~70px - comfortably above a 44px target */
padding: 0 0.32rem;
border-radius: 0.32rem;
background: var(--darkBg, var(--bg_color_L2));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
transition: transform 140ms cubic-bezier(.22, .61, .36, 1),
box-shadow 140ms ease;
}
#app .wallet-container-content .container .userDetail > div:active {
transform: scale(.97);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
#app .wallet-container-content .container .userDetail > div .imgD {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 0.26667rem;
flex: 0 0 auto;
}
#app .wallet-container-content .container .userDetail > div span {
font-size: 0.34667rem;
font-weight: 600;
text-align: left;
line-height: 1.25;
}
/* ============================================================================
3. ACCOUNT (/#/main) — reorder hooks
.userinfo-content is already a flex column, so its children accept `order`.
The values are spaced by 10 so a section can be slipped between two later
without renumbering, and they are applied by nth-child rather than by class
because the children are separate scoped components whose roots are not
addressable from here.
Left at the bundle's own order until the page can be rendered and each
nth-child confirmed against what it actually is. Uncommenting these without
that check would reorder by guess.
========================================================================== */
/*
#app .userinfo-content > *:nth-child(1) { order: 10; }
#app .userinfo-content > *:nth-child(2) { order: 20; }
#app .userinfo-content > *:nth-child(3) { order: 30; }
#app .userinfo-content > *:nth-child(4) { order: 40; }
#app .userinfo-content > *:nth-child(5) { order: 50; }
*/
/* Breathing room between the account page's stacked sections, which currently
butt against each other. Safe regardless of what the sections turn out to be. */
#app .userinfo-content > * + * {
margin-top: 0.26667rem;
}
/* ============================================================================
4. WITHDRAWAL GATE — show the reason, do not just fail on submit
When the owner's "first deposit before withdrawing" rule is on,
GetUserInfo.php now returns isAllowWithdraw = 0, and the bundle already
carries the string for it (en-8cc73390.js `withdrwsTip1`, "You must recharge
to enable the withdrawal function"). The bundle only surfaces that at submit,
so the button still looks pressable until it is pressed.
.recycleBtn.disable is the bundle's own disabled style; this just makes the
affordance honest before the tap.
========================================================================== */
#app .recycleBtnD .recycleBtn.disable {
opacity: .62;
cursor: not-allowed;
}
/* ============================================================================
5. Motion respect
========================================================================== */
@media (prefers-reduced-motion: reduce) {
#app .wallet-container-content .container .userDetail > div {
transition: none;
}
#app .wallet-container-content .container .userDetail > div:active {
transform: none;
}
}
/* ============================================================================
6. WITHDRAWAL — provider, account, amount, apply. Nothing else.
The screen is /#/wallet/Withdraw (and ?type=Add for the account form). What
the owner wants left on it: two provider tiles with logos, an account number,
a name, an amount, and the apply button.
What is removed here, with the file each is styled in:
.explain page-wallet-Withdraw-63863e4e.css
the long "withdrawal guide" block
.addWithdrawType-text the red advisory paragraph on the add form
.Recharge__container-intro an intro/notes panel
.c2cWithdraw__C-tip,
.c2cWithdraw__T C2C tip and terms blocks - dead now that the
only methods are EasyPaisa and JazzCash, but
they still occupy the route
.canNotAdd the "cannot add" placeholder
Provider choice comes from GetWithdrawalTypes.php, which now returns exactly
two rows: EasyPaisa (withdrawID 1) and JazzCash (withdrawID 5), with icons
from /assets/paylogos/. GetBankList.php returns a single matching entry per
method, so the old 22-bank dropdown is gone rather than merely hidden - the
player picks a logo and types straight into the account fields.
========================================================================== */
/* .rechargeh__container MUST NOT be listed here.
It was, and it was wrong. It is not a strip on the withdraw route - it is the
root container of BOTH history pages, /wallet/RechargeHistory and
/wallet/WithdrawHistory. Hiding it made each of them render completely blank:
the markup was present and correct, with the tabs, the date picker and the
rows all built, sitting inside an element whose computed display was none.
Layers 50 and 95 style its tabs and rows, which is the clue that it is a page
and not an ornament. The old strips it was meant to remove are already gone
anyway: layers 56 and 57 replace the withdraw and recharge screens wholesale. */
#app .explain,
#app .addWithdrawType-text,
#app .Recharge__container-intro,
#app .c2cWithdraw__C-tip,
#app .c2cWithdraw__T,
#app .canNotAdd {
display: none;
}
/* The two provider tiles: give them room and a clear selected state. .withdrawWay
is the bundle's own chooser row. */
#app .withdrawWay {
gap: 0.32rem;
margin-top: 0.32rem;
}
#app .withdrawWay > * {
min-height: 1.86667rem;
border-radius: 0.32rem;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
transition: box-shadow 140ms ease, transform 140ms cubic-bezier(.22, .61, .36, 1);
}
#app .withdrawWay > *:active { transform: scale(.98); }
/* The bundle marks the chosen method with .active on the tile. */
#app .withdrawWay > .active {
box-shadow: inset 0 0 0 2px var(--main_color, #10b981);
}
/* Account form: the fields are the screen now, so they get the tap target the
old cramped rows never had. */
#app .addWithdrawType-top {
padding: 0.32rem 0.26667rem;
}
@media (prefers-reduced-motion: reduce) {
#app .withdrawWay > * { transition: none; }
#app .withdrawWay > *:active { transform: none; }
}
/* ---- 56-withdraw-screen.css ---- */
/* ============================================================================
LAYER 56 — WITHDRAW SCREEN
Styles the one-screen withdraw flow drawn by assets/ui/wallet-ui.js, and gets
the bundle's own two-screen flow out of its way.
WHY THE OLD SCREEN IS HIDDEN RATHER THAN RESTYLED. The compiled flow is: a
"+ Add a bank account number" placeholder, then a separate add-account form,
then - only once an account exists - the provider tiles and an amount box.
The owner asked for one screen: pick a provider, type a name, a number and an
amount, submit. That is a different flow, not a restyle, so the JS draws it
and this file hides what it replaces. Everything is scoped to
`body.bxw-active`, a class the script adds only while its screen is mounted
and removes on the way out - so the original screen is one class away and
every other route is untouched.
SPECIFICITY. The bundle's rules are Vue-scoped, e.g.
`.withdraw__container-content[data-v-...]` = (0,2,0). `body.bxw-active .x`
is (0,2,0) too and would tie, so the hiding rules use `#app` to reach (1,2,0)
and win on rank rather than on order. Same technique layers 50 and 55 use, and
the reason nothing here needs !important.
========================================================================== */
/* ============================================================================
1. Clear the way
.withdraw__container-content is the whole old body: the balance card that
renders blank, the add-account placeholder, the guide, the C2C blocks.
.navbar__content-right is the header's right slot, which held the
"Withdrawal history" link - the one the owner wants moved down into the page.
This is the site's OWN navbar component (scope data-v-12a80a3e), not vant's
van-nav-bar, which is what the markup actually shows; the header stays so the
back arrow still works. Scoped through .withdraw__container as well as
body.bxw-active, because .navbar is shared by every route and its right slot
is a real control on the others.
========================================================================== */
body.bxw-active #app .withdraw__container-content,
body.bxw-active #app .withdraw__container .navbar__content-right {
display: none;
}
/* ============================================================================
1b. Loading placeholder — shared by both wallet screens
Lives here rather than in layer 57 because both screens use it, the same way
they share .bxw-bal and .bxw-card. Created and removed by BXW.screen() in
assets/ui/wallet-sign.js.
WHY IT EXISTS. Entering the route used to paint the bundle's own layout
first, then the replacement over the top of it - which the owner described as
the old design showing and then a splash. The body class now hides the old
layout on the first frame, which leaves a brief empty area while Vue finishes
creating the container. This holds that space with the game's own logo
instead of nothing.
The logo comes from /brand/logo?v=mark - the admin-settable brand endpoint,
so it follows a rebrand rather than being pinned to one image file.
========================================================================== */
.bxw-splash {
position: fixed;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg_color_L1, #131a24);
opacity: 1;
transition: opacity 200ms ease;
/* Clicks pass straight through. The content underneath is already hidden by
section 1, so the only thing still reachable is the navbar's back arrow -
which should keep working while this is up. */
pointer-events: none;
}
.bxw-splash-out {
opacity: 0;
}
.bxw-splash img {
width: 1.70667rem;
height: 1.70667rem;
object-fit: contain;
/* Breathing rather than spinning: a spinner claims something is being
fetched, and by this point the only thing being waited on is a Vue render. */
animation: bxw-breathe 1400ms ease-in-out infinite;
}
@keyframes bxw-breathe {
0%, 100% { opacity: .45; transform: scale(.96); }
50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.bxw-splash img { animation: none; opacity: .8; }
.bxw-splash { transition: none; }
}
/* ============================================================================
1c. Dialog — shared by both wallet screens
Created by BXW.dialog() in assets/ui/wallet-sign.js. Used for the
deposit-before-withdrawing rule, which a small red line under the form was
not communicating.
Tokens are restated with fallbacks rather than inherited, because this is
appended to and so sits outside the .bxw element that defines them.
========================================================================== */
.bxw-dialog {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 0.64rem;
background: rgba(0, 0, 0, .58);
animation: bxw-dialog-in 160ms ease-out;
}
.bxw-dialog-box {
width: 100%;
max-width: 7.46667rem;
padding: 0.53333rem 0.48rem 0.42667rem;
border-radius: 0.42667rem;
background: var(--bg_color_L2, #1b2431);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08),
0 0.32rem 1.06667rem rgba(0, 0, 0, .45);
color: var(--text_color_L1, #fff);
text-align: center;
}
.bxw-dialog-h {
margin: 0 0 0.21333rem;
font-size: 0.42667rem;
font-weight: 700;
}
.bxw-dialog-p {
margin: 0 0 0.48rem;
font-size: 0.34667rem;
font-weight: 500;
line-height: 1.5;
color: var(--text_color_L2, rgba(255, 255, 255, .62));
}
.bxw-dialog-row {
display: flex;
gap: 0.26667rem;
}
.bxw-dialog-row button {
flex: 1;
min-height: 1.06667rem; /* ~40px */
border: 0;
border-radius: 0.53333rem;
font: inherit;
font-size: 0.37333rem;
font-weight: 700;
cursor: pointer;
}
.bxw-dialog-b1 {
background: var(--main_color, #10b981);
color: #fff;
}
.bxw-dialog-b2 {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
color: var(--text_color_L2, rgba(255, 255, 255, .62));
}
@keyframes bxw-dialog-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bxw-dialog { animation: none; }
}
/* ============================================================================
2. Tokens
Local names, resolved from the site's own theme variables with fallbacks, so
a brand colour change moves this screen too and a missing variable still
leaves something readable.
========================================================================== */
.bxw {
--bxw-gap: 0.32rem;
--bxw-radius: 0.37333rem;
--bxw-surface: var(--bg_color_L2, #1b2431);
--bxw-surface-2: var(--bg_color_L1, #131a24);
--bxw-line: rgba(255, 255, 255, .08);
--bxw-text: var(--text_color_L1, #fff);
--bxw-muted: var(--text_color_L2, rgba(255, 255, 255, .55));
--bxw-brand: var(--main_color, #10b981);
--bxw-warn: #ff5a5f;
--bxw-ok: #22c55e;
padding: var(--bxw-gap) 0.32rem 1.2rem;
color: var(--bxw-text);
/* .withdraw__container sets text-align: center, which the overlay inherits
and which centred every field label. Forms read left-aligned. */
text-align: left;
}
/* The site's reset does not put form controls on border-box, so `width: 100%`
plus horizontal padding made every input 11px wider than the card holding it.
Measured before this rule: input right edge 427.7px against a card edge of
416.4px. */
.bxw *,
.bxw *::before,
.bxw *::after {
box-sizing: border-box;
}
/* ============================================================================
3. Balance
The old balance card rendered its label and a refresh icon but no number,
because it reads props the withdraw route never fills. This one is filled
from GetUserInfo, which does return the amount.
========================================================================== */
.bxw-bal {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bxw-gap);
padding: 0.4rem 0.42667rem;
border-radius: var(--bxw-radius);
background: linear-gradient(135deg,
var(--bxw-brand) 0%,
color-mix(in srgb, var(--bxw-brand) 45%, #000) 100%);
}
/* color-mix is recent; this keeps older webviews from getting a flat block. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.bxw-bal { background: var(--bxw-brand); }
}
.bxw-bal-k {
font-size: 0.32rem;
font-weight: 600;
opacity: .82;
}
.bxw-bal-v {
font-size: 0.53333rem;
font-weight: 700;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
}
/* ============================================================================
4. The card
========================================================================== */
.bxw-card {
margin-top: var(--bxw-gap);
padding: 0.42667rem 0.37333rem 0.48rem;
border-radius: var(--bxw-radius);
background: var(--bxw-surface);
box-shadow: inset 0 0 0 1px var(--bxw-line);
}
.bxw-h {
margin: 0 0 0.29333rem;
font-size: 0.37333rem;
font-weight: 600;
}
/* ============================================================================
5. Provider tiles
Visible from the moment the screen opens. In the old flow they only appeared
after an account had already been saved, which is why the screen looked
empty.
========================================================================== */
.bxw-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bxw-gap);
margin-bottom: 0.42667rem;
}
.bxw-m {
display: flex;
align-items: center;
justify-content: center;
gap: 0.21333rem;
min-height: 1.44rem; /* ~54px - a real target, not an icon */
padding: 0 0.16rem;
border: 0;
border-radius: 0.32rem;
background: var(--bxw-surface-2);
box-shadow: inset 0 0 0 1px var(--bxw-line);
color: var(--bxw-muted);
font: inherit;
font-size: 0.34667rem;
font-weight: 600;
cursor: pointer;
transition: box-shadow 140ms ease,
color 140ms ease,
transform 140ms cubic-bezier(.22, .61, .36, 1);
}
/* Both brand marks are dark artwork on a transparent background, so on this
dark card they read as a smudge. The light chip is what makes them legible -
it is the same treatment the logos get on the providers' own apps.
#app is needed here and not elsewhere in this file: layer 00-base.css:93 has
`#app img { background-color: transparent }` to stop artwork glowing against
the dark ground, and at (1,0,1) that outranks a plain `.bxw-m img` at (0,2,0).
Verified by enumerating the rules the element actually matches - the chip was
silently transparent until this prefix was added. */
#app .bxw-m img {
width: 0.74667rem;
height: 0.74667rem;
padding: 0.08rem;
object-fit: contain;
border-radius: 50%;
background: #fff;
filter: grayscale(1);
opacity: .45;
transition: filter 140ms ease, opacity 140ms ease;
}
.bxw-m:active { transform: scale(.97); }
.bxw-m.on {
color: var(--bxw-text);
box-shadow: inset 0 0 0 2px var(--bxw-brand);
}
#app .bxw-m.on img { filter: none; opacity: 1; }
/* ============================================================================
6. Fields
Three, and only three: name, number, amount. Labels stay visible above the
input rather than living in the placeholder, so they are still readable once
the field has been filled in.
========================================================================== */
.bxw-f {
display: block;
margin-bottom: 0.37333rem;
}
.bxw-f > span {
display: block;
margin-bottom: 0.16rem;
font-size: 0.32rem;
font-weight: 600;
color: var(--bxw-muted);
}
.bxw-f > span i {
font-style: normal;
font-weight: 500;
opacity: .7;
}
.bxw-f input {
width: 100%;
height: 1.17333rem; /* ~44px */
padding: 0 0.32rem;
border: 0;
border-radius: 0.26667rem;
background: var(--bxw-surface-2);
box-shadow: inset 0 0 0 1px var(--bxw-line);
color: var(--bxw-text);
font: inherit;
font-size: 0.37333rem;
font-weight: 600;
outline: none;
transition: box-shadow 140ms ease;
}
.bxw-f input::placeholder {
color: var(--bxw-muted);
font-weight: 500;
opacity: .7;
}
.bxw-f input:focus {
box-shadow: inset 0 0 0 2px var(--bxw-brand);
}
/* Amount gets the currency printed inside the field so the number itself can
be large without a second line of chrome. */
.bxw-amt {
position: relative;
display: flex;
align-items: center;
}
.bxw-amt b {
position: absolute;
left: 0.32rem;
font-size: 0.34667rem;
font-weight: 600;
color: var(--bxw-muted);
pointer-events: none;
}
.bxw-amt input {
padding-left: 1.28rem;
font-size: 0.48rem;
font-variant-numeric: tabular-nums;
}
.bxw-quick {
display: flex;
gap: 0.21333rem;
margin-top: 0.21333rem;
}
.bxw-quick button {
flex: 1;
min-height: 0.85333rem;
border: 0;
border-radius: 0.21333rem;
background: var(--bxw-surface-2);
box-shadow: inset 0 0 0 1px var(--bxw-line);
color: var(--bxw-muted);
font: inherit;
font-size: 0.32rem;
font-weight: 600;
cursor: pointer;
}
.bxw-quick button:active { color: var(--bxw-text); }
/* ============================================================================
7. Message line and submit
========================================================================== */
.bxw-msg {
margin: 0 0 0.26667rem;
font-size: 0.32rem;
font-weight: 600;
line-height: 1.45;
}
.bxw-msg.warn { color: var(--bxw-warn); }
.bxw-msg.ok { color: var(--bxw-ok); }
.bxw-go {
width: 100%;
min-height: 1.17333rem;
border: 0;
border-radius: 0.58667rem;
background: var(--bxw-brand);
color: #fff;
font: inherit;
font-size: 0.4rem;
font-weight: 700;
cursor: pointer;
transition: transform 140ms cubic-bezier(.22, .61, .36, 1), opacity 140ms ease;
}
.bxw-go:active { transform: scale(.98); }
.bxw-go:disabled {
opacity: .5;
cursor: not-allowed;
transform: none;
}
/* ============================================================================
8. Withdrawal history — in the page, not the header
The header link is hidden in section 1. This is where it went: below the
form, where it is reachable without competing with the back arrow.
========================================================================== */
.bxw-hist {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 1.17333rem;
margin-top: var(--bxw-gap);
padding: 0 0.42667rem;
border-radius: var(--bxw-radius);
background: var(--bxw-surface);
box-shadow: inset 0 0 0 1px var(--bxw-line);
color: var(--bxw-text);
font-size: 0.34667rem;
font-weight: 600;
text-decoration: none;
}
.bxw-hist i {
font-style: normal;
font-size: 0.42667rem;
color: var(--bxw-muted);
}
/* ============================================================================
9. Wider screens
The screen is built for a phone. On a tablet or a desktop browser the card
stops growing rather than stretching one input across 1400px.
========================================================================== */
@media (min-width: 640px) {
.bxw {
max-width: 520px;
margin: 0 auto;
}
}
/* ============================================================================
10. Motion respect
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.bxw-m,
.bxw-f input,
.bxw-go {
transition: none;
}
.bxw-m:active,
.bxw-go:active {
transform: none;
}
}
/* ---- 57-deposit-screen.css ---- */
/* ============================================================================
LAYER 57 — DEPOSIT SCREEN
The deposit twin of layer 56. Same visual language on purpose: the owner
asked for the deposit screen to match the withdraw screen, and a player
moving between the two should not feel they have changed products.
Nearly every token and control style is INHERITED from layer 56 by sharing
its class names (.bxw-bal, .bxw-card, .bxw-m, .bxw-f, .bxw-go, .bxw-hist).
That is deliberate rather than lazy: two copies of the same button would
drift the first time one of them is adjusted. This file only holds what is
genuinely different about depositing.
WHAT IS DIFFERENT FROM WITHDRAW
-------------------------------
1. The container is shaped differently. On /#/wallet/Withdraw the old body
sits in one wrapper (.withdraw__container-content) that can be hidden with
a single rule. On /#/wallet/Recharge there is no such wrapper - read from
the bundle, the view renders as
![]()
behind it is
visibility:hidden in the bundle and only exists to give the band its size. */
#app .dailySignIn__container-content__wrapper-block__header {
border-radius: var(--bx-r-sm) var(--bx-r-sm) 0 0;
background: var(--bx-sunken);
box-shadow: inset 0 -1px 0 var(--bx-hairline);
}
#app .dailySignIn__container-content__wrapper-block__header span {
color: var(--bx-text-mid);
font-weight: 600;
}
/* --- CLAIMED -----------------------------------------------------------------
The bundle paints this state with Signed.png (a red ribbon raster, and
day7BgActive.png for the wide day-7 tile) and forces every label to
#fff !important. On a dark ground that reads as an error, and a raster cannot
be recoloured — so the art is dropped and the state is rebuilt in CSS:
emerald fill, a drawn check mark, and a deliberately dimmed label, because a
claimed day is finished business and should stop competing for attention. */
#app .dailySignIn__container-content__wrapper-block.signed {
position: relative;
background: linear-gradient(158deg, rgba(var(--bx-primary-rgb), .30) 0%,
rgba(var(--bx-primary-rgb), .11) 48%, var(--bx-surface) 100%);
box-shadow: var(--bx-e1), inset 0 0 0 1px rgba(var(--bx-primary-rgb), .40);
}
#app .dailySignIn__container-content__wrapper-block.signed:last-of-type {
background: linear-gradient(100deg, rgba(var(--bx-primary-rgb), .26) 0%,
rgba(var(--bx-primary-rgb), .08) 52%, var(--bx-surface) 100%);
}
/* `.signed img{visibility:visible}` un-hides the ribbon raster inside the day
band. Re-hide that one image only — the reward icon is a separate node. */
#app .dailySignIn__container-content__wrapper-block.signed
.dailySignIn__container-content__wrapper-block__header img { visibility: hidden; }
#app .dailySignIn__container-content__wrapper-block.signed
.dailySignIn__container-content__wrapper-block__header {
background: linear-gradient(90deg, var(--bx-primary-dk), var(--bx-primary));
box-shadow: none;
}
/* These two carry !important because the bundle pins `.signed span{color:#fff
!important}` across every label in the tile. Day number stays bright on its
emerald band; the reward label drops back. */
#app .dailySignIn__container-content__wrapper-block.signed
.dailySignIn__container-content__wrapper-block__header span {
color: var(--bx-text-hi) !important;
font-weight: 700;
}
#app .dailySignIn__container-content__wrapper-block.signed > span { color: var(--bx-text-lo) !important; }
#app .dailySignIn__container-content__wrapper-block.signed > img { opacity: .55; }
/* Check mark, drawn rather than shipped: a disc plus a rotated corner. Logical
insets so it mirrors with the RTL layouts the bundle supports. */
#app .dailySignIn__container-content__wrapper-block.signed::before {
content: "";
position: absolute;
top: .16rem;
inset-inline-end: .16rem;
width: .42667rem;
height: .42667rem;
border-radius: 50%;
background: var(--bx-primary-lt);
box-shadow: 0 0 0 .04rem rgba(var(--bx-base-rgb), .6), var(--bx-glow-primary);
}
#app .dailySignIn__container-content__wrapper-block.signed::after {
content: "";
position: absolute;
top: .285rem;
inset-inline-end: .325rem;
width: .1rem;
height: .19rem;
border: solid var(--bx-base);
border-width: 0 .04rem .04rem 0;
transform: rotate(45deg);
}
#app .dailySignIn__container-content__footer button {
box-shadow: var(--bx-e2), var(--bx-glow-primary);
transition: transform var(--bx-fast) var(--bx-ease-back),
box-shadow var(--bx-fast) var(--bx-ease);
}
#app .dailySignIn__container-content__footer button:active {
transform: scale(.98);
box-shadow: var(--bx-e1);
}
#app .dailySignInRecord__container-wrapper__content { box-shadow: var(--bx-e1), var(--act-ring); }
/* ============================================================================
3 · DAILY TASKS
========================================================================= */
/* award_bg.png is fully opaque orange — unlike the sign-in hero there is no
transparency to composite through, so the art has to be re-lit rather than
under-painted. Baseline is a pure gradient. Where background-blend-mode is
supported the prize-box illustration returns as a luminance layer over the
emerald ground, which keeps the art without keeping the orange. */
#app .dailySignIn__container .task-banner {
background-color: var(--bx-base);
background-image: linear-gradient(118deg, rgba(var(--bx-primary-rgb), .34) 0%,
var(--bx-surface-2) 52%, var(--bx-base) 100%);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border-bottom: 1px solid var(--bx-hairline);
}
@supports (background-blend-mode: luminosity) {
#app .dailySignIn__container .task-banner {
background-image:
linear-gradient(100deg, rgba(var(--bx-base-rgb), .90) 0%,
rgba(var(--bx-base-rgb), .60) 46%, rgba(var(--bx-base-rgb), .26) 100%),
url(/assets/png/award_bg-00eaec82.png),
linear-gradient(135deg, rgba(var(--bx-primary-rgb), .52) 0%,
var(--bx-surface-2) 60%, var(--bx-base) 100%);
background-size: 100% 100%, cover, 100% 100%;
background-position: center, center right, center;
background-blend-mode: normal, luminosity, normal;
}
}
#app .dailySignIn__container .task-banner .banner-content { color: var(--bx-text-mid); }
#app .dailySignIn__container .task-panel .task-item { box-shadow: var(--bx-e2), var(--act-ring); }
/* The corner flag has to hold against three different fills (new / week / day);
one inner highlight gives all three the same moulded edge. */
#app .dailySignIn__container .task-panel .task-item-header .hearder-status {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* The description well is bg_color_L3 inside a bg_color_L2 card — surface-2 on
surface, close enough to blur together. Sink it instead of raising it. */
#app .dailySignIn__container .task-panel .task-item-description {
background: var(--bx-sunken);
box-shadow: inset 0 0 0 1px var(--bx-hairline);
}
/* The reward figure is the payoff; give it the gold weight. */
#app .dailySignIn__container .task-panel .task-item-bottom span {
color: var(--bx-accent-lt);
font-weight: 600;
}
#app .dailySignIn__container .task-panel .task-item .btn { transition: transform var(--bx-fast) var(--bx-ease-back); }
#app .dailySignIn__container .task-panel .task-item .btn:active { transform: scale(.98); }
/* Claimed/disabled CTAs take --button_dis_color but leave their label on
--text_white: near-white ink on a near-black pill still shouts. */
#app .dailySignIn__container .task-panel .task-item .btnOther.status3,
#app .dailySignIn__container .task-panel .task-item .btnNew.status2,
#app .dailySignIn__container .task-panel .task-item .btnNew.status3 {
color: var(--bx-text-lo);
box-shadow: inset 0 0 0 1px var(--bx-hairline);
}
#app .task-record-container .head > button {
color: var(--bx-text-mid);
border-radius: var(--bx-r-sm);
transition: color var(--bx-fast) var(--bx-ease);
}
#app .task-record-container .record-panel-item { box-shadow: var(--bx-e1), var(--act-ring); }
/* ============================================================================
4 · FIRST RECHARGE
========================================================================= */
#app .first_list-item {
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2), var(--act-ring);
}
/* The bonus figure is already accent-coloured; it just needs to out-weigh the
body copy around it so the offer lands at a glance. */
#app .first_list-item .head .title > span,
#app .first_list-item .head .orange {
color: var(--bx-accent-lt);
font-weight: 700;
}
#app .first_list-item .foot .btn { transition: transform var(--bx-fast) var(--bx-ease-back); }
#app .first_list-item .foot .btn:active { transform: scale(.97); }
/* ============================================================================
5 · CHAMPIONSHIP
========================================================================= */
/* The tab strip is solid emerald with `color:#fff!important` on every tab, so
the active one is indistinguishable. Drop to a dark strip and let weight and
colour carry the state — matching !important, as the bundle rule has it. */
#app .championship .tabs {
background: var(--bx-surface);
box-shadow: inset 0 -1px 0 var(--bx-hairline);
}
#app .championship .tabs > div {
color: var(--bx-text-mid) !important;
transition: color var(--bx-fast) var(--bx-ease);
}
#app .championship .tabs > div.active { color: var(--bx-text-hi) !important; }
#app .championship .tabs > div.active:after { border-bottom-color: var(--bx-primary); }
/* Tournament prize card. The overlay is three hardcoded reds: a #ff3134 label
bar, an rgba(253,86,92,.5) countdown and a #fff amount plate. This is a prize
panel, not a game result, so it takes the gold treatment. */
#app .championship .item .right .head h1,
#app .championship .item .right .foot h1 {
background: linear-gradient(90deg, var(--bx-accent) 0%, var(--bx-accent-lt) 100%);
color: var(--bx-base);
font-weight: 700;
}
#app .championship .item .right .head > div.time,
#app .championship .item .right .foot > div.time {
background: rgba(var(--bx-base-rgb), .74);
color: var(--bx-text-hi);
box-shadow: inset 0 0 0 1px var(--bx-hairline-2);
}
#app .championship .item .right .head > div.amount,
#app .championship .item .right .foot > div.amount {
background: var(--bx-sunken);
color: var(--bx-accent-lt);
box-shadow: var(--act-ring-hi);
}
#app .championship .item .right .head.type2 h1 { border-top-color: rgba(var(--bx-accent-rgb), .4); }
#app .championship .btn.active { box-shadow: var(--bx-e1), var(--bx-glow-primary); }
/* --- leaderboard --------------------------------------------------------- */
#app .ChampionshipDetail > div { box-shadow: var(--bx-e1); }
/* The prize column defaults to red; on a rewards table an amount won is gold. */
#app .ChampionshipDetail .ranking .amount > span:last-of-type,
#app .ChampionshipDetail .rankingList .info > span:last-of-type {
color: var(--bx-accent-lt);
font-weight: 600;
}
/* Top three. Rank lives in a medal PNG *inside* the row, so the row itself is
only reachable through :has(). Purely additive — without :has() the medals
still read, the row just loses its gold wash. */
@supports selector(:has(*)) {
#app .ChampionshipDetail .rankingList .info:has(.top1),
#app .ChampionshipDetail .rankingList .info:has(.top2),
#app .ChampionshipDetail .rankingList .info:has(.top3) {
color: var(--bx-text-hi);
background: linear-gradient(90deg, rgba(var(--bx-accent-rgb), .16) 0%,
rgba(var(--bx-accent-rgb), .05) 58%, transparent 100%);
box-shadow: var(--act-ring-hi);
}
#app .ChampionshipDetail .rankingList .info:has(.top1) {
background: linear-gradient(90deg, rgba(var(--bx-accent-rgb), .26) 0%,
rgba(var(--bx-accent-rgb), .07) 58%, transparent 100%);
}
}
/* Rule-sheet ranking table draws three solid sides per row — a boxy grid. */
#app .rule .con .ranking > div.info { border-color: var(--bx-hairline); }
/* ============================================================================
6 · POINT MALL & REDEEM
========================================================================= */
/* --main_gradient-color is a gradient and the bundle assigns it to
`background-color`, which is invalid and computes to transparent. Paint a
real ground so the header is not a hole while its hero image loads. */
#app .pointMall__container-header {
background: linear-gradient(158deg, var(--bx-surface-2) 0%, var(--bx-base) 100%);
}
#app .pointMall__container-treasureActivity { box-shadow: var(--bx-e3), var(--act-ring); }
#app .pointMall__container-info__left,
#app .pointMall__container-info__right { box-shadow: var(--bx-e1), var(--act-ring); }
/* --- product tiles ------------------------------------------------------- */
/* Header and footer are two boxes with their own corner radii. Pull them into
one card so a product reads as a single object, then flatten the inner radii
so nothing double-rounds against the clip. */
#app .pointMall__container-products__content-item {
border-radius: var(--bx-r-md);
overflow: hidden;
background: var(--bx-surface);
box-shadow: var(--bx-e2), var(--act-ring);
}
#app .pointMall__container-products__content-item__header {
background: linear-gradient(168deg, var(--bx-surface-2), var(--bx-sunken));
border-radius: 0;
}
#app .pointMall__container-products__content-item__header img { border-radius: 0; }
/* The price strip is a solid emerald bar sitting over the bottom of the product
shot. A scrim keeps the photograph and still carries the number. */
#app .pointMall__container-products__content-item__header-left {
background: linear-gradient(180deg, rgba(var(--bx-base-rgb), 0) 0%,
rgba(var(--bx-base-rgb), .90) 62%);
color: var(--bx-accent-lt);
}
#app .pointMall__container-products__content-item__footer {
background: transparent;
border-radius: 0;
box-shadow: inset 0 1px 0 var(--bx-hairline);
}
/* Hierarchy inside the tile: product name first, points cost second and in
gold, button third. */
#app .pointMall__container-products__content-item__footer > span { color: var(--bx-text-hi); }
#app .pointMall__container-products__content-item__footer div span {
color: var(--bx-accent-lt);
font-size: .4rem;
font-weight: 700;
}
#app .pointMall__container-products__content-item__footer button {
box-shadow: var(--bx-e1);
transition: transform var(--bx-fast) var(--bx-ease-back);
}
#app .pointMall__container-products__content-item__footer button:active { transform: scale(.97); }
#app .pointMall__container-products-all { background: rgba(var(--bx-primary-rgb), .08); }
/* --- treasure / lottery prize tiles -------------------------------------- */
#app .treasure__container__treasure-item__header,
#app .lotteryActivity__container-products__treasure-item__header {
color: var(--bx-text-hi);
background: linear-gradient(90deg, var(--bx-primary-dk) 0%, var(--bx-primary) 100%);
}
#app .treasure__container__treasure-item__footer-title > span { color: var(--bx-accent-lt); }
/* The one red CTA in the rewards flow, and its label rides the undefined
--textW. Bring it in line with every other claim button. */
#app .lotteryActivity__container-products__treasure-item__footer-button {
color: var(--bx-text-hi);
background: var(--main_gradient-color);
box-shadow: var(--bx-e1), var(--bx-glow-primary);
}
/* --- redeem -------------------------------------------------------------- */
#app .redeem__container-detail__notes { box-shadow: var(--bx-e1), var(--act-ring); }
#app .redeem__container-actionSheet__item { box-shadow: inset 0 0 0 1px var(--bx-hairline); }
/* Point cost was #e22f2f — a spend figure, gold like every other point value. */
#app .redeem__container-actionSheet__cost > span { color: var(--bx-accent-lt); }
/* --- prize claim (receiveLottery) ---------------------------------------- */
#app .receiveLottery__container-hero { box-shadow: var(--bx-e2), var(--act-ring); }
/* --textW and --colorText-26 are left undefined on purpose (each is read as
both ink and ground), so these labels currently inherit whatever is behind
them. Fixed per selector, never globally. */
#app .receiveLottery__container-hero__left span {
color: var(--bx-base);
font-weight: 700;
}
#app .receiveLottery__container-receiverBtn {
color: var(--bx-text-hi);
box-shadow: var(--bx-e2), var(--bx-glow-primary);
}
#app .receiveLottery__container-address__body-footer div .van-checkbox__label,
#app .member-package-rule .first-list-item .head .title,
#app .member-package-rule-bonus-title { color: var(--bx-text-mid); }
#app .dailySignIn__container .navbar .navbar__content .navbar__content-title,
#app .dailySignIn__container .navbar .navbar__content .navbar__content-left .van-icon {
color: var(--bx-text-hi);
}
/* ============================================================================
7 · TURNTABLE
========================================================================= */
#app .turntable-page .turntable-back {
border-radius: var(--bx-r-md);
box-shadow: var(--bx-e2), var(--act-ring);
}
/* The spins-remaining strip is bg_color_L1 — the same value as the page ground,
so today it has no edges at all. */
#app .turntable-page .turntable-item,
#app .turntable-detail-tips {
background: var(--bx-surface);
box-shadow: var(--bx-e1), inset 0 0 0 1px var(--bx-hairline);
}
/* Prize tables rule every row in solid --norm_red-color, which on a dark ground
reads as a run of error states rather than as a table. */
#app .turntable-page .turntable-table-content > div,
#app .turntable-detail-hero__wrapper-content > div { border-bottom-color: var(--bx-hairline); }
#app .turntable-page .turntable-table ul .targetAmount,
#app .turntable-detail-hero__wrapper ul .targetAmount {
color: var(--bx-accent-lt);
font-weight: 700;
}
#app .turntable-page .turntable-entry-item svg { transition: transform var(--bx-mid) var(--bx-ease-back); }
#app .turntable-page .turntable-entry-item:active svg { transform: scale(.92); }
/* ============================================================================
8 · SUPER JACKPOT
========================================================================= */
/* superJackpot.png is opaque salmon — same problem as award_bg, same fix. */
#app .Xg-page .Xg-info {
background-color: var(--bx-base);
background-image: linear-gradient(118deg, rgba(var(--bx-primary-rgb), .32) 0%,
var(--bx-surface-2) 54%, var(--bx-base) 100%);
background-size: 100% 100%;
background-position: center;
}
@supports (background-blend-mode: luminosity) {
#app .Xg-page .Xg-info {
background-image:
linear-gradient(100deg, rgba(var(--bx-base-rgb), .88) 0%,
rgba(var(--bx-base-rgb), .56) 44%, rgba(var(--bx-base-rgb), .22) 100%),
url(/assets/png/superJackpot-53463ffb.png),
linear-gradient(135deg, rgba(var(--bx-primary-rgb), .50) 0%,
var(--bx-surface-2) 58%, var(--bx-base) 100%);
background-size: 100% 100%, cover, 100% 100%;
background-position: center, center right, center;
background-blend-mode: normal, luminosity, normal;
}
}
#app .Xg-page .tip,
#app .Xg-page .txt { color: var(--bx-text-mid); }
#app .Xg-list .item { box-shadow: var(--bx-e2), var(--act-ring); }
#app .Xg-list .item .numbox .citem .num {
color: var(--bx-accent-lt);
font-weight: 700;
}
#app .Xg-list .item .box .Xg-btn { box-shadow: var(--bx-e1), var(--bx-glow-primary); }
#app .Xg-list .item .box .Xg-btn-received {
color: var(--bx-text-lo);
box-shadow: inset 0 0 0 1px var(--bx-hairline);
}
/* ============================================================================
9 · MEMBER PACKAGE
========================================================================= */
/* Three hardcoded red/pink gradients stacked into one card. The top slab and
the pink body are replaced outright; the state pills keep their split so
claimed and available stay distinguishable at a glance. */
#app .package-item-top {
background: linear-gradient(100deg, rgba(var(--bx-accent-rgb), .22) 0%,
var(--bx-surface-2) 58%, var(--bx-surface) 100%);
box-shadow: inset 0 -1px 0 var(--bx-hairline);
}
#app .package-item-box {
background: var(--act-face);
box-shadow: var(--bx-e1), var(--act-ring);
}
#app .package-item-bottom.done {
background: linear-gradient(90deg, var(--bx-primary-dk) 0%, var(--bx-primary) 100%);
color: var(--bx-text-hi);
}
#app .package-item-bottom.p {
background: linear-gradient(90deg, var(--bx-surface-2) 0%, var(--bx-sunken) 100%);
color: var(--bx-text-lo);
box-shadow: inset 0 0 0 1px var(--bx-hairline);
}
#app .package-item-btn.apply {
background: linear-gradient(180deg, var(--bx-accent-lt) 0%, var(--bx-accent) 100%);
color: var(--bx-base);
font-weight: 700;
}
#app .package-item-btn.done {
color: var(--bx-text-lo);
box-shadow: inset 0 0 0 1px var(--bx-hairline);
}
/* Warning strip: red copy on a bare surface pill. Keep the alarm, add a ground
so it says "notice" rather than "the card behind me failed to load". */
#app .package-tips {
background: rgba(var(--bx-accent-rgb), .10);
color: var(--bx-accent-lt);
box-shadow: var(--act-ring-hi);
}
/* ---- 61-first-deposit.css ---- */
/* ============================================================================
LAYER 61 — FIRST-DEPOSIT BONUS
The tier list on /#/activity/FirstRecharge. The owner asked for its design and
structure changed; this rebuilds the card completely.
WHAT IT LOOKED LIKE. Eight identical slabs, each one a stack of four rows:
First deposit 200000 + ₹10,000.00 <- head
Deposit 200000 for the first time and ... <- description, a full sentence
[============ 0/200000 ============] [Deposit] <- foot
Everything was the same weight, the bonus - the only reason anyone reads this
screen - sat in a small orange span at the end of a line, and each card
repeated the amount three times in three different formats.
WHAT IT IS NOW. A two-column card: the bonus is the headline on the right, the
deposit it needs is the label on the left, and the progress bar becomes a thin
track under both rather than a boxed-in widget. The sentence is dropped to a
quiet caption. Same information, one reading order.
SPECIFICITY. Every bundle rule here is Vue-scoped -
`.first_list-item[data-v-48dabef8]` = (0,2,0) - so `#app .first_list-item` at
(1,1,0) outranks it with no !important. The three scopes involved:
data-v-c0418dcc the list container
data-v-48dabef8 the card and everything in its head/foot
data-v-bff59ba2 the progress bar
The overrides below never name a scope, so they survive a rebuild that changes
the hashes.
THE AMOUNTS ARE NOT SET HERE. They come from
deepanshu/api/webapi/_first_recharge_tiers.php, which is also what the claim
endpoint pays from - one table, so the screen and the payout cannot disagree.
========================================================================== */
/* ============================================================================
1. The list
========================================================================== */
#app .first_list {
display: flex;
flex-direction: column;
gap: 0.26667rem;
padding: 0.32rem;
}
/* ============================================================================
2. The card
A grid, so the bonus can sit on the right of the first row and the progress
track can span the full width underneath without extra markup.
┌──────────────────────────┬──────────────┐
│ Deposit 25,000 │ + Rs.1,750 │
├──────────────────────────┴──────────────┤
│ ▓▓▓▓▓▓░░░░░░░░░░░░ 10,000 / 25,000 │
├─────────────────────────────────────────┤
│ [Deposit]│
└─────────────────────────────────────────┘
========================================================================== */
#app .first_list-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.16rem 0.26667rem;
padding: 0.37333rem 0.4rem;
margin: 0;
border-radius: 0.42667rem;
background:
linear-gradient(120deg,
rgba(var(--bx-primary-rgb), .10) 0%,
transparent 58%),
var(--bx-surface, #1b2431);
box-shadow: inset 0 0 0 1px var(--bx-hairline, rgba(255, 255, 255, .07));
transition: transform var(--bx-fast, 140ms) var(--bx-ease, ease);
}
#app .first_list-item:active { transform: scale(.995); }
/* ============================================================================
3. Head — the deposit needed, and the bonus it earns
========================================================================== */
#app .first_list-item .head {
display: contents; /* let .title and .orange become grid children directly */
}
#app .first_list-item .title {
grid-column: 1;
align-self: center;
margin: 0;
font-size: 0.34667rem;
font-weight: 600;
line-height: 1.3;
color: var(--bx-text-mid, rgba(255, 255, 255, .78));
}
/* The bundle prints the raw amount in a bare right after the words
"First deposit", with no separator. Making it a block on its own line turns
"First deposit200000" into a label above a number. */
#app .first_list-item .title span {
display: block;
margin-top: 0.02667rem;
font-size: 0.48rem;
font-weight: 800;
line-height: 1.15;
font-variant-numeric: tabular-nums;
color: var(--bx-text-hi, #fff);
}
/* The bonus. Was a small orange span at the end of a line; it is the headline. */
#app .first_list-item .orange {
grid-column: 2;
align-self: center;
justify-self: end;
padding: 0.16rem 0.29333rem;
border-radius: 0.32rem;
background: linear-gradient(180deg, #ffd98a, #f5b942);
color: #3a2600;
font-size: 0.40667rem;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ============================================================================
4. Description
A whole sentence restating the two numbers already shown above it
("Deposit 200000 for the first time and you will receive 10000 bonus").
Kept - the owner asked for nothing to be removed - but demoted to a caption so
it stops competing with the figures.
========================================================================== */
#app .first_list-item .description {
grid-column: 1 / -1;
margin: 0;
font-size: 0.28rem;
font-weight: 500;
line-height: 1.45;
color: var(--bx-text-lo, rgba(255, 255, 255, .45));
}
/* ============================================================================
5. Foot — progress and the button
========================================================================== */
#app .first_list-item .foot {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.32rem;
margin-top: 0.05333rem;
}
/* The bundle sets the track's height, radius and colours as INLINE styles on the
element, and an inline style beats any selector. So the track keeps its own
background and height, and this only takes what inline styles do not set. */
#app .first_list-item .foot .progress {
position: relative;
min-width: 0;
overflow: hidden;
}
/* The filled portion. Its width is inline (the real progress) - only the paint
is changed here. */
#app .first_list-item .foot .progress .line {
background: linear-gradient(90deg,
var(--bx-primary, #10b981),
var(--bx-primary-lt, #34d399)) !important;
/* !important is used here for one reason, stated because it is the only one in
this file: the bundle writes `background: var(--norm_secondary-color)` as an
INLINE style on this element, and nothing but !important reaches past that.
Height, radius and width stay inline - they are the actual progress value. */
}
/* "0/200000" sits inside the track. Centred and set in tabular figures so it
does not jitter as the number grows. */
#app .first_list-item .foot .progress .step {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.26667rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bx-text-hi, #fff);
text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
pointer-events: none;
}
/* ============================================================================
6. The button
.n1 / .n2 / .n3 are the bundle's state classes - not claimable, claimable,
already claimed. They were near-identical slabs; each now reads as what it is.
========================================================================== */
#app .first_list-item .foot .btn {
min-width: 2.13333rem;
min-height: 0.85333rem; /* ~32px, a real target */
padding: 0 0.32rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.42667rem;
font-size: 0.32rem;
font-weight: 700;
white-space: nowrap;
transition: transform var(--bx-fast, 140ms) var(--bx-ease, ease);
}
#app .first_list-item .foot .btn:active { transform: scale(.96); }
/* Not there yet - present but plainly inactive. */
#app .first_list-item .foot .btn.n1 {
background: transparent;
box-shadow: inset 0 0 0 1px var(--bx-hairline-2, rgba(255, 255, 255, .14));
color: var(--bx-text-lo, rgba(255, 255, 255, .45));
}
/* Claimable - the only filled control on the card. */
#app .first_list-item .foot .btn.n2 {
background: linear-gradient(180deg, var(--bx-primary-lt, #34d399), var(--bx-primary, #10b981));
color: var(--bx-ink-on-primary, #04150f);
box-shadow: 0 0.08rem 0.21333rem rgba(0, 0, 0, .3);
}
/* Already taken. */
#app .first_list-item .foot .btn.n3 {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(var(--bx-primary-rgb), .35);
color: rgba(var(--bx-primary-rgb), .85);
}
/* ============================================================================
7. Narrow phones
At 320px the bonus pill and the deposit figure fight for the same row, so the
card stacks instead.
========================================================================== */
@media (max-width: 340px) {
#app .first_list-item { grid-template-columns: 1fr; }
#app .first_list-item .orange { grid-column: 1; justify-self: start; }
#app .first_list-item .foot { grid-template-columns: 1fr; gap: 0.21333rem; }
#app .first_list-item .foot .btn { width: 100%; }
}
/* ============================================================================
8. Motion respect
========================================================================== */
@media (prefers-reduced-motion: reduce) {
#app .first_list-item,
#app .first_list-item .foot .btn { transition: none; }
#app .first_list-item:active,
#app .first_list-item .foot .btn:active { transform: none; }
}
/* ---- 80-imageswap.css ---- */
/* ===========================================================================
80-imageswap.css — surfaces whose colour is baked into a bitmap.
Everything in the earlier layers works by feeding the bundle better values
for colours it already reads from CSS. This layer handles the cases where
there is no colour to feed: the look is painted into a PNG (a white bar, a
red splash, a pink gradient row) and no amount of token remapping touches it.
The only fix is to take the image out of the render and rebuild the shape in
CSS — which is why this file sorts last: it must win over every screen layer
that legitimately styled the same element.
Scope discipline — this file deliberately does NOT touch:
- number balls (n0..n9 / num0..num9 / prize0..prize9), K3 dice faces,
greenBall / redBall — their semantics live in the bitmap and the owner
asked for no game-screen changes;
- VIP badge artwork (only plates behind badges are fair game, and none of
those are in this file);
- win-6264c04c.png, the winners heading icon — measured at #F9AA17, which
is already the accent gold. Nothing to neutralise.
Specificity: bundle rules are Vue-scoped, e.g. `.win_item[data-v-3cb56872]`
= (0,2,0). An `#app`-prefixed selector reaches (1,n,0) and outranks them
without !important. !important is used exactly once in this file — to beat an
earlier THEME layer that declared it — and the reason is noted at the site.
=========================================================================== */
/* ===========================================================================
1. BOOT SPLASH — .start-page / start-79633e9b.png
---------------------------------------------------------------------------
StartPage.vue renders a single empty
; the whole
screen is one 144KB PNG (a red key-art plate with the old wordmark baked in)
sitting on background-color:#ff3431. It is the first frame every returning
user sees, so leaving it is the single loudest way to be recognised — the
entire image has to go, not be tinted.
The div being empty is the opportunity: ::before and ::after are unused, so
the mark and a boot indicator can be drawn from scratch.
The mark is /brand/logo?v=square — logo.php renders the CURRENT brand name
as a 256x256 SVG, so this stays correct when the owner renames the platform
from the admin panel. .htaccess rewrites the extensionless path to logo.php.
=========================================================================== */
#app .start-page {
/* Kills both the PNG and the hardcoded #ff3431 underneath it. The bundle
rule has no !important, so plain specificity is enough. */
background-color: var(--bx-base);
background-image:
/* emerald bloom behind where the mark sits */
radial-gradient(120% 62% at 50% 24%,
rgba(var(--bx-primary-rgb), .20) 0%,
rgba(var(--bx-primary-rgb), 0) 64%),
/* a whisper of accent off the bottom edge so the screen is not flat */
radial-gradient(90% 42% at 50% 100%,
rgba(var(--bx-accent-rgb), .10) 0%,
rgba(var(--bx-accent-rgb), 0) 72%),
linear-gradient(180deg,
var(--bx-surface) 0%,
var(--bx-base) 52%,
var(--bx-sunken) 100%);
background-repeat: no-repeat;
background-position: center;
/* The bundle sets background-size:contain for the key art; a gradient stack
needs to cover instead or the layers letterbox on tall screens. */
background-size: cover;
}
#app .start-page::before {
content: "";
position: absolute;
left: 50%;
top: 32%;
width: 3.46667rem;
height: 3.46667rem;
margin-left: -1.73333rem;
background: url("/brand/logo?v=square") no-repeat center / contain;
filter: drop-shadow(0 .16rem .53333rem rgba(var(--bx-primary-rgb), .38));
animation: bx-boot-mark var(--bx-slow) var(--bx-ease-back) both;
}
/* Indeterminate rail. The splash unmounts on its own, so this only has to say
"working", not report progress. */
#app .start-page::after {
content: "";
position: absolute;
left: 50%;
bottom: 1.86667rem;
width: 2.13333rem;
height: .05333rem;
margin-left: -1.06667rem;
border-radius: 999px;
background-color: rgba(var(--bx-primary-rgb), .16);
background-image: linear-gradient(90deg,
rgba(var(--bx-primary-rgb), 0) 0%,
var(--bx-primary-lt) 50%,
rgba(var(--bx-primary-rgb), 0) 100%);
background-repeat: no-repeat;
background-size: 46% 100%;
animation: bx-boot-sweep 1.15s var(--bx-ease) infinite;
}
@keyframes bx-boot-mark {
from { opacity: 0; transform: scale(.90) translateY(.16rem); }
to { opacity: 1; transform: none; }
}
@keyframes bx-boot-sweep {
from { background-position: -60% 0; }
to { background-position: 160% 0; }
}
/* ===========================================================================
2. BOTTOM TAB BAR NOTCH — .tabbar__container / tabBarBg-0d05851f.png
---------------------------------------------------------------------------
One 750x132 PNG drew the entire white bar AND the scooped arc the raised
centre button sits in. 10-shell.css correctly dropped the image for a dark
gradient — and the notch went with it, leaving the button stranded on a flat
rectangle.
Rebuilding it needs the plate on a pseudo-element, not on the container: a
mask applies to an element AND all its descendants, so masking
.tabbar__container directly would punch a hole straight through the centre
icon it is meant to frame. ::before carries the plate at z-index -1 (the
container is already a stacking context via position:fixed + z-index:100, so
the negative index cannot escape behind the page) and the tab items paint
over it untouched.
Geometry, measured off the original PNG by first-opaque-pixel scan:
bar edge y=18, scoop floor y=88 at x=375, scoop half-width 83px at the bar
edge. Solving for the circle gives r = 84px, centre 14px above the bar edge.
At the design scale 1rem = 75px, and against a bar that 10-shell made ~18px
taller than the painted one, that lands at r 1.10667rem centred .08rem above
the container top — which puts the arc within 3px of the collar circle's
bottom edge, exactly the relationship the artwork had.
=========================================================================== */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
#app .tabbar__container {
/* !important is required here, and only here, because 10-shell.css sets
`background: ... !important` at the same specificity; without it no
source order or selector weight can clear the plate off the container. */
background: none !important;
/* The blur has to go with it: a backdrop-filter is clipped to the border
box, not the mask, so live content would show through the scoop and
erase the notch. An opaque plate on ::before is what a notch needs. */
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-top: 0;
/* Kept on the container (unmasked) so it still separates the bar from the
page; the pseudo cannot cast one, since a mask clips the element's
shadow along with everything else. */
box-shadow: 0 -.02667rem .18667rem rgba(0, 0, 0, .55);
}
#app .tabbar__container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
/* emerald hairline riding the scooped edge, so the raised action reads
as seated in the bar rather than parked on top of it */
radial-gradient(circle at 50% -.08rem,
rgba(0, 0, 0, 0) 0 1.12rem,
rgba(var(--bx-primary-rgb), .42) 1.13rem 1.14667rem,
rgba(0, 0, 0, 0) 1.16rem),
/* soft darkening hugging the arc — the pocket shadow */
radial-gradient(circle at 50% -.08rem,
rgba(0, 0, 0, 0) 0 1.12rem,
rgba(0, 0, 0, .40) 1.13333rem,
rgba(0, 0, 0, 0) 1.68rem),
/* top hairline across the flat run of the bar */
linear-gradient(180deg,
var(--bx-hairline-2) 0 .01333rem,
rgba(0, 0, 0, 0) .01333rem),
linear-gradient(180deg,
var(--bx-surface) 0%,
var(--bx-base) 64%,
var(--bx-sunken) 100%);
/* The cut. rgba(0,0,0,0) rather than `transparent` keeps the alpha ramp
clean; the .02667rem feather between the stops kills the jaggies. */
-webkit-mask-image: radial-gradient(circle at 50% -.08rem,
rgba(0, 0, 0, 0) 0 1.09333rem, #000 1.12rem);
mask-image: radial-gradient(circle at 50% -.08rem,
rgba(0, 0, 0, 0) 0 1.09333rem, #000 1.12rem);
/* Without no-repeat the gradient tiles outside its box and the notch
reappears at the bar's edges. */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* The collar the button sits in. The bundle paints it in --bg_color_L2 (the
card surface) because on the old artwork it stood on a white bar; inside a
real cut it should read as the page ground showing through.
Colour only — no box-shadow. 20-home.css already gives `#app .promotionBg`
its hairline ring and emerald halo, and this selector is more specific, so
restating box-shadow here would silently delete that halo. */
#app .tabbar__container-item:nth-of-type(3) .promotionBg {
background: var(--bx-base);
}
}
/* ===========================================================================
3. WINNERS FEED — winning_bg-85772bbb.png + kBg-80f2d8f2.png
---------------------------------------------------------------------------
winning_bg is a 691x139 pink-to-peach gradient card (measured average
#FFA694) with the avatar notch cut into it; kBg is a #FB2367 open ring drawn
around each avatar. Both are pure decoration with the old brand's colour
baked in, so both become CSS.
The row's children are absolutely positioned against it and its text is
already white, so only the plate changes — no geometry moves.
The accent wash below is a background LAYER rather than a ::after: every
element in this row is absolutely positioned, so a positioned pseudo would
paint over the name and the amount instead of behind them.
=========================================================================== */
#app .winning .win_item {
background:
/* the winning figure sits at the trailing edge — weight it, don't tint it */
radial-gradient(70% 140% at 100% 50%,
rgba(var(--bx-accent-rgb), .10) 0%,
rgba(var(--bx-accent-rgb), 0) 70%),
linear-gradient(104deg,
var(--bx-surface-2) 0%,
var(--bx-surface) 58%,
var(--bx-surface) 100%);
border-radius: var(--bx-r-md);
/* An INSET ring, not a real border. box-sizing is border-box globally, so a
1px border would shrink the padding box and nudge every one of this row's
absolutely-positioned children — avatar, name, amount — by a pixel. */
box-shadow:
inset 0 0 0 .01333rem var(--bx-hairline),
inset 0 .01333rem 0 rgba(255, 255, 255, .06),
var(--bx-e1);
}
#app .winning .win_item .avatar .avatar_outbg {
/* The 404-free way to lose a pink ring: drop the bitmap, draw the ring. */
background-image: none;
border: .02667rem solid rgba(var(--bx-primary-rgb), .55);
border-radius: 50%;
box-shadow: 0 0 .16rem rgba(var(--bx-primary-rgb), .32);
}
/* Muted timestamp is hardcoded #84888d in the bundle — close enough to the
token that only the name is worth aligning, for one source of truth. */
#app .winning .win_item .info .time {
color: var(--bx-text-lo);
}
/* ===========================================================================
4. IMAGES THAT ARE NOT ON DISK
---------------------------------------------------------------------------
changlong_bg-82acfbd5.png, changlong51_bg-1135cdae.jpg and
profit-56d94e8f.png are all referenced by the bundle and all missing. Because
.htaccess maps 404 to /index.html, the browser is handed a full HTML document
where it asked for an image: a wasted round trip, a decode error in the
console, and on a slow connection a second copy of the app shell over the
wire. background-image:none stops the request being made at all.
Removing a background is not enough on its own — each of these selectors was
relying on the image for its entire appearance, so each needs a replacement.
=========================================================================== */
/* The dragon/streak promo strip: without its art this is a 2.13rem void.
The emerald bloom is a background layer, not a pseudo, for the same
paint-order reason as the winners row: the strip's contents are rendered by
the bundle and a positioned ::before would cover them. */
#app .ChangLong,
#app .ChangLong.game51 {
background:
radial-gradient(58% 120% at 12% 50%,
rgba(var(--bx-primary-rgb), .16) 0%,
rgba(var(--bx-primary-rgb), 0) 68%),
linear-gradient(122deg,
var(--bx-surface-2) 0%,
var(--bx-surface) 46%,
var(--bx-sunken) 100%);
border-radius: var(--bx-r-md);
/* Inset ring rather than a border, so the strip's padding-top:.24rem keeps
placing its contents exactly where the bundle intended. */
box-shadow:
inset 0 0 0 .01333rem var(--bx-hairline),
var(--bx-e1);
/* clips whatever the strip renders inside to the new corner radius */
overflow: hidden;
}
/* Section heading whose bullet icon is missing. Keeping the indent and drawing
an emerald rule in its place costs nothing and matches the other headings'
optical weight. */
#app .profit .title {
background-image: linear-gradient(180deg,
var(--bx-primary-lt) 0%,
var(--bx-primary-dk) 100%);
background-repeat: no-repeat;
background-position: left center;
background-size: .10667rem .4rem;
padding-left: .34667rem;
/* Colour and weight are deliberately absent: 20-home.css styles this heading
alongside the screen's other titles. This layer owns only the dead image. */
}
/* ===========================================================================
5. SMALL MONOCHROME MARKS
---------------------------------------------------------------------------
close-862c6a4d.png measures as pure #FFFFFF at 24% coverage — an outline
glyph, already legible on a dark scrim, so inverting it would only make it
disappear. What it actually lacks on the new ground is a body: it floats
with nothing to say it is pressable.
hint-c6828dc5.png is a #FF7172 warning circle — the old brand red, which now
collides with the result-red the game layer owns. A filter walks it to warm
amber (the hue-rotate matrix lands it near #E17F3E before the saturate), so
it reads as advisory rather than as a loss.
=========================================================================== */
/* Scoped by data-v because `.close` is a generic name used across the bundle;
this hash is the popup dismiss control that carries the PNG. */
#app .close[data-v-9cd12fb2] {
background-color: rgba(var(--bx-surface-rgb), .62);
background-size: .44rem;
background-position: center;
border: .01333rem solid var(--bx-hairline-2);
-webkit-backdrop-filter: blur(.16rem);
backdrop-filter: blur(.16rem);
box-shadow: var(--bx-e2);
opacity: .88;
transition:
opacity var(--bx-fast) var(--bx-ease),
transform var(--bx-fast) var(--bx-ease);
}
#app .close[data-v-9cd12fb2]:active {
opacity: 1;
transform: translateX(-50%) scale(.92);
}
/* Standalone tip marks — no text inside, so a filter is free to run over the
whole element. */
#app .tipbg {
filter: hue-rotate(30deg) saturate(1.3) brightness(1.05);
}
/* These two carry the icon as a background on an element that ALSO holds text,
so a filter would drag the emerald copy toward teal with it. The mark is
rebuilt as a single gradient instead: `closest-side` makes the stops
proportional to whatever background-size the bundle already set, so one
declaration serves both the .29333rem and the .42667rem instance. */
#app .ar_wallet_tip,
#app .c2cDetail__CO .order .tip {
background-image: radial-gradient(circle closest-side at 50% 50%,
var(--bx-accent) 0 34%,
rgba(0, 0, 0, 0) 36% 62%,
var(--bx-accent) 64% 88%,
rgba(0, 0, 0, 0) 90%);
}
/* ---- 90-motion.css ---- */
/* ============================================================================
LAYER 90 — MOTION & DEPTH
The last layer. Everything below it has already settled the colours; this
file only adds travel, press response and the depth cues that tell a finger
what is a surface and what is a control.
Three rules govern every declaration in here:
1. transform and opacity only. No width / height / top / left / margin is
ever animated, so nothing in this layer can trigger layout.
2. Nothing is required for legibility. Every element is fully readable and
operable at rest — motion decorates a state change, it never carries
information.
3. Game-play surfaces are off limits. Betting boards, number balls, dice,
result tables and countdowns get no motion at all, because a bet placed
against a moving target feels broken. Where a shared component (a Vant
button, a cell) reaches into a game screen, the game scope explicitly
opts back out further down.
00-base.css already carries the global prefers-reduced-motion opt-out, so
the OS setting neutralises this whole file without anything repeated here.
============================================================================ */
/* ---------------------------------------------------------------------------
Keyframes.
bx-route-in ends on `transform: none` rather than translate3d(0,0,0). With
fill-mode `both` the final frame sticks forever, and a lingering transform
would turn every page root into a containing block — which silently breaks
`position: sticky` and `position: fixed` for anything nested inside it.
--------------------------------------------------------------------------- */
@keyframes bx-route-in {
from { opacity: 0; transform: translate3d(var(--bx-route-x, 14px), 0, 0); }
to { opacity: 1; transform: none; }
}
/* Travels the full width of its host plus one host-width of lead-in, so the
band sweeps in from off-screen instead of fading up in place. */
@keyframes bx-shimmer {
from { transform: translate3d(-100%, 0, 0); }
to { transform: translate3d(100%, 0, 0); }
}
@keyframes bx-scroll-lift {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===========================================================================
1. ROUTE FEEL
Moving between tabs should read as travel, not as a repaint. Each page root
slides a short distance along the reading axis and resolves.
The bundle has no single router wrapper — every route component is its own
`X__container` root — so the entrance is applied to the verified page roots
by name. Deliberately absent from this list:
.lotteryDetail__container, .Betting__C, .GameList__C — game-play screens
.login__container, .register__container — layer 30 already
animates those
.dialog__container, .popup__container, .empty__container,
.noticeBar__container, .tabbar__container — not route roots
=========================================================================== */
html:lang(ar) #app { --bx-route-x: -14px; } /* travel follows reading order */
#app .Recharge__container,
#app .RechargeUsdt__container,
#app .rechargeh__container,
#app .rechargeDetail__container,
#app .withdraw__container,
#app .WHD__container,
#app .transRecord__container,
#app .totalSavings__container,
#app .TotalAssets__container,
#app .StrongBox__container,
#app .StrongBoxRecord__container,
#app .StrongBoxAbout__container,
#app .USDT__container,
#app .addUSDT__container,
#app .bankCard__container,
#app .addBankCard__container,
#app .chooseBank__container,
#app .addAddress__container,
#app .userInfo__container,
#app .settingPanel__container,
#app .serviceCenter__container,
#app .sysMessage__container,
#app .messageDetail__container,
#app .myOrders__container,
#app .orderDetail__container,
#app .myCommission__container,
#app .myInvitation__container,
#app .invitationDetail__container,
#app .promotionShare__container,
#app .subordinate__container,
#app .allGames__container,
#app .gamesList__container,
#app .onlineGames__container,
#app .financialServices__container,
#app .pointMall__container,
#app .pointMall-rule__container,
#app .pointMallRecord__container,
#app .dailySignIn__container,
#app .dailySignInRecord__container,
#app .dailySignInRules__container,
#app .signIn__container,
#app .redeem__container,
#app .myLottery__container,
#app .myReceive__container,
#app .receiveLottery__container,
#app .lotteryActivity__container,
#app .luckyWinners__container {
animation: bx-route-in var(--bx-mid) var(--bx-ease) both;
}
/* ===========================================================================
2. PRESS FEEDBACK
Under 160ms, because anything slower reads as lag rather than response on
touch. The gesture is always the same: sink one pixel, shrink a hair.
=========================================================================== */
/* --- 2a. Shared controls -------------------------------------------------
These components appear on game screens too, so they get transform only —
no shadow change to unwind — and the game scopes cancel the transform below.
The transition restates Vant's own `opacity` transition on .van-button so
the shorthand does not drop it. */
#app .van-button,
#app .van-cell--clickable,
#app .van-grid-item__content,
#app .van-tab,
#app .tabbar__container-item {
-webkit-tap-highlight-color: transparent;
transition: transform 130ms var(--bx-ease),
background-color 130ms var(--bx-ease),
color var(--bx-fast) var(--bx-ease),
opacity var(--van-duration-fast, 140ms) var(--bx-ease);
}
#app .van-button:active,
#app .van-cell--clickable:active,
#app .van-grid-item__content:active,
#app .van-tab:active {
transform: translateY(1px) scale(.985);
}
/* Vant presses a black overlay over a button to signal touch. Against the dark
ground black on black is invisible, so flip the wash to light. */
#app .van-button:before {
background: #fff;
transition: opacity 130ms var(--bx-ease);
}
#app .van-button:active:before {
opacity: .14;
}
/* The tab bar item is squeezed a touch harder than a card: it is a small
target and needs a bigger visible answer. This supersedes the coarser
scale(.94) in layer 10 so the whole app shares one press language. */
#app .tabbar__container-item:active {
transform: translateY(1px) scale(.955);
}
/* --- 2b. Game-play opt-out ----------------------------------------------
Shared controls inside a betting screen keep their colour and their Vant
overlay, but lose the transform. Only the property this layer introduced is
reset, so every bundle transform underneath is left intact. */
#app .lotteryDetail__container .van-button:active,
#app .lotteryDetail__container .van-cell--clickable:active,
#app .lotteryDetail__container .van-tab:active,
#app .Betting__C .van-button:active,
#app .Betting__C .van-tab:active,
#app .GameList__C .van-button:active,
#app .NumberSelectContainer .van-button:active,
#app .Bet-box .van-button:active,
/* The containers above were not the whole story. These are the ones the
compiled CSS actually hangs board controls on - verified by grepping for
.fun-tab-item, .tab_item and .van-tab in assets/css. Without them a press
transform reached the WinGo colour tabs, the number selector and the
XoSo / K3 / 5D boards. */
#app .ColorsContainer .van-tab:active,
#app .ColorsContainer .fun-tab-item:active,
#app .ColorsContainer .tab_item:active,
#app .NumberSelectContainer .van-tab:active,
#app .NumberSelectContainer .fun-tab-item:active,
#app .NumberSelectContainer .tab_item:active,
#app .Xoso .van-tab:active,
#app .Xoso .fun-tab-item:active,
#app .bet-container .van-tab:active,
#app .bet-container .fun-tab-item:active,
#app .bet-container .tab_item:active,
#app .Play__C .van-tab:active,
#app .Betting__C .fun-tab-item:active,
#app .GameList__C .van-tab:active,
#app .changLong__C-tab .van-tab:active,
#app .BetRecord__C-gameTab .van-tab:active,
#app .BetRecord__C-timeTab .van-tab:active {
transform: none;
box-shadow: none;
}
/* --- 2c. Lobby cards, rows and chips ------------------------------------
Every selector here lives on a lobby, list or tab surface — never on a
board — so these can also pull their shadow in tight on press, which is
what sells the card as a physical thing being pushed into the page.
The shadow is set on :active only; the resting elevation stays whatever the
colour layers gave it. */
/* `.tab_item` and `.fun-tab-item` are NOT lobby-only. The compiled CSS puts
them on game boards too - .ColorsContainer .fun-tab-item (the WinGo colour
tabs), .NumberSelectContainer .NumberTab .fun-tab-item, .Xoso ... .fun-tab-item.
The owner asked for no changes to the games, and a press transform on a bet
control is exactly the kind of change that makes a board feel wrong, so both
classes are scoped to the lobby containers here. */
#app .gameItem1,
#app .gameImte2 .big_prize,
#app .onlineGamesItem,
#app .gameListGrid__container-wrapper__item,
#app .hot_container .popular .list .item,
#app .lotterySlotItem,
#app .first_list-item,
#app .look_all,
#app .all_slot,
#app .allGames__container .tab_item,
#app .aloneGame .tab_item,
#app .onlineGames__container .fun-tab-item,
#app .allGames__container .fun-tab-item {
-webkit-tap-highlight-color: transparent;
transition: transform 130ms var(--bx-ease),
box-shadow 130ms var(--bx-ease);
}
#app .gameImte2 .big_prize:active,
#app .onlineGamesItem:active,
#app .gameListGrid__container-wrapper__item:active,
#app .hot_container .popular .list .item:active,
#app .lotterySlotItem:active,
#app .first_list-item:active,
#app .look_all:active,
#app .all_slot:active,
#app .allGames__container .tab_item:active,
#app .aloneGame .tab_item:active,
#app .onlineGames__container .fun-tab-item:active,
#app .allGames__container .fun-tab-item:active {
transform: translateY(1px) scale(.985);
box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
/* .gameItem1's press state lives in 20-home.css, which already transforms the
card AND its ![]()
. Applying a second transform to the same element here
compounded into a double-sink on tap, so this layer only supplies the
transition above and leaves the :active to the layer that owns the card. */
/* ===========================================================================
3. BANNER CAROUSEL
Vant clips .van-swipe to a single slide (`overflow: hidden`) and tags no
slide as active, so a per-slide scale between the current banner and its
neighbours is not reachable from CSS without restructuring the component.
Depth is delivered instead by lifting the visible slide off the ground and
letting the whole strip recede under the drag.
=========================================================================== */
/* The bundle hangs a filter variable off the banner image for its shadow.
A real elevation shadow reads far better on a dark ground than a filter. */
#app .swiper_box .my-swipe img {
border-radius: var(--bx-r-lg);
box-shadow: var(--bx-e2), 0 0 0 1px var(--bx-hairline);
}
/* Vant sets the slide duration inline from JS; only the curve is ours. */
#app .van-swipe__track {
transition-timing-function: var(--bx-ease);
}
/* Grabbing the strip pushes it back into the page — the one 3D cue the
carousel can honestly carry. It springs forward again on release. */
#app .swiper_box .my-swipe {
transition: transform var(--bx-mid) var(--bx-ease-back);
}
#app .swiper_box .my-swipe:active {
transform: scale(.982);
}
/* The active pill already animates in the bundle; give it the brand glow so
the eye can find the position indicator without reading it. */
#app .swiper_box .swiper-button .active {
box-shadow: 0 0 10px rgba(var(--bx-primary-rgb), .65);
}
/* ===========================================================================
4. HORIZONTAL RAILS
The only true horizontal scrollers outside the game screens are the Vant
scrollable tab strips, the share sheet, and the StrongBox record strip —
the home lobby's game lists are CSS grids and are left alone. Each rail
gets momentum, snap, and a fade at both ends so the content visibly
continues past the edge instead of stopping at a hard cut.
=========================================================================== */
#app .van-tabs__nav--complete,
#app .van-share-sheet__options,
#app .StrongBoxRecord__container {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scroll-snap-type: x proximity; /* proximity, not mandatory: Vant scrolls
the active tab into view itself and
mandatory snapping fights that */
overscroll-behavior-x: contain; /* a rail at its end must not drag the page */
-webkit-mask-image: linear-gradient(to right,
transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(to right,
transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
/* The fade only reads as depth if no scrollbar cuts across it. */
#app .van-tabs__nav--complete::-webkit-scrollbar,
#app .van-share-sheet__options::-webkit-scrollbar,
#app .StrongBoxRecord__container::-webkit-scrollbar {
display: none;
}
#app .van-tabs__nav--complete,
#app .van-share-sheet__options,
#app .StrongBoxRecord__container {
scrollbar-width: none;
}
#app .van-tabs__nav--complete .van-tab,
#app .van-share-sheet__options .van-share-sheet__option {
scroll-snap-align: center;
}
/* The AllGames body is a tall scroller in a fixed-height box; the bottom fade
is the same signal turned vertical. */
#app .allGames__container-list {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
-webkit-mask-image: linear-gradient(to bottom,
#000 0, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom,
#000 0, #000 calc(100% - 28px), transparent 100%);
}
/* ===========================================================================
5. SKELETON SHIMMER
Vant's default loader blinks the whole block between opacity 1 and .6,
which on a dark ground looks like a rendering fault. Replace it with a
single light band travelling across the block — a transform, so it costs
one composited layer and no layout.
=========================================================================== */
#app .van-skeleton--animate {
animation: none; /* retire the blink; the sweep below replaces it */
}
#app .van-skeleton-title,
#app .van-skeleton-paragraph,
#app .van-skeleton-avatar,
#app .van-skeleton-image,
#app .skeleton_hot .hot_list div,
#app .skeleton_hot .hot_tit,
#app .skeleton_slot div,
#app .skeleton_other div,
#app .skeleton_flash div {
position: relative;
overflow: hidden;
/* The bundle paints these placeholders in the old light palette — one of
them in a pink gradient. Flatten them to a sunken surface so the sweep
is the only thing that moves. */
background: var(--bx-surface-2) !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px var(--bx-hairline) !important;
}
#app .van-skeleton-title:after,
#app .van-skeleton-paragraph:after,
#app .van-skeleton-avatar:after,
#app .van-skeleton-image:after,
#app .skeleton_hot .hot_list div:after,
#app .skeleton_hot .hot_tit:after,
#app .skeleton_slot div:after,
#app .skeleton_other div:after,
#app .skeleton_flash div:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(90deg,
transparent 0,
rgba(255, 255, 255, .05) 35%,
rgba(var(--bx-primary-rgb), .10) 50%,
rgba(255, 255, 255, .05) 65%,
transparent 100%);
animation: bx-shimmer 1.35s var(--bx-ease) infinite;
pointer-events: none;
}
/* ===========================================================================
6. STICKY HEADER SHADOW
The header should look flush with the page until there is content behind
it to cast onto. Scroll-driven, so it tracks the scroll position exactly
rather than flipping at a threshold, and it animates opacity on a
pseudo-element rather than interpolating box-shadow itself.
Wrapped in @supports: where scroll() is unavailable the header simply keeps
the flat hairline it already has from layer 10, which is a valid resting
state, not a broken one.
Only .navbar-fixed is treated. The bundle's other fixed header is the
page-top variant of the Vant tab wrap, and that one sits inside
`.van-tabs__wrap { overflow: hidden }` — a cast shadow there would simply be
clipped away, and lifting that overflow would change how the tab strip
clips its own active indicator.
=========================================================================== */
#app .navbar-fixed:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .62);
}
@supports (animation-timeline: scroll()) {
#app .navbar-fixed:after {
animation: bx-scroll-lift linear both;
/* The header is position:fixed, so the scroll container has to be named
explicitly — the document, not whatever ancestor box encloses it. */
animation-timeline: scroll(root block);
animation-range: 0 72px;
}
}
/* ---- 95-a11y.css ---- */
/* ============================================================================
LAYER 95 — CONTRAST & USABILITY CORRECTIONS
Sorts last, so it is the final word. Everything here is a CORRECTION, not a
design decision: each rule fixes a measurable contrast or usability defect
that the light-to-dark palette move created, and nothing else.
Scope rule, honoured throughout: no game-play screen is touched. The WinGo /
K3 / 5D / TRX boards, number balls, dice faces, colour buttons, odds chips,
timers and result tables inherit the dark ground through the tokens and get
nothing more from this file. Selectors matching .Betting__Popup-*, .FDB__C-*,
.FDP__C-*, .K3B__C-*, .GameRecord__C-*, .MyGameRecord__C-*, .TimeLeft__C-*,
.Trend__C-*, .RecordNav__C, .changLong__C-*, .x-4d-*, .x-bet-*, .x-btn,
.betType, .oddsBox, .gameBox and .GameList__C were found by the audit and
deliberately left alone.
Specificity: bundle rules are Vue-scoped, e.g. `.foo[data-v-1a2b3c4d]` at
(0,2,0). Every rule below is prefixed with #app for (1,x,0), which an ID
guarantees outranks. !important appears only where the bundle rule it
corrects is itself !important.
============================================================================ */
:root {
/* On-primary ink. White on emerald #10B981 measures ~2.5:1 and fails AA;
this reads ~8.9:1 on the same fill. It is a near-black tinted toward the
brand hue so it looks intentional rather than like a black hole. Matches
the value 10-shell.css already uses on .btn, kept in one place here.
Assumption worth knowing: this is correct for any mid-to-light brand
colour. If the admin palette is ever set to a genuinely DARK primary, this
token has to flip to --bx-text-hi — CSS cannot pick for us. */
--bx-ink-on-primary: #04150F;
}
/* ============================================================================
1. ON-PRIMARY TEXT
--text_color_L4 is the generic "text that sits on the brand fill" token and
theme.css keeps it #FFFFFF. That was right on the old red; on emerald it
fails AA. It has ~330 call sites, but only the ones whose OWN rule also
paints an emerald fill may be darkened — plenty of other consumers sit on
charcoal, where dark ink would be invisible. Every selector below was
verified to carry background: var(--main-color | --main_gradient-color |
--main_gradient-color2 | --GradiantBlue) in the same declaration block.
============================================================================ */
/* ---- Wallet: recharge, withdraw, bank binding, strongbox ----------------- */
#app .Recharge__container-tabcard__items.active,
#app .Recharge__box .rechage_active,
#app .RechargeUsdt__container .rechage_active,
#app .Recharge__content .other_bank .bank_name,
#app .Recharge__content-paymoney__money-list__item.active,
#app .Recharge__content-paymoney__money-list__item.arActive,
#app .rechage_active,
#app .arupiAmount ul li.active,
#app .bank_list .bank_item_active,
#app .toActive,
#app .paste,
#app .utr_box .paste,
#app .ar_wallet .ar_btn,
#app .rechargeDetail__container-buttons > div > span:last-of-type,
#app .rechargeh__container .van-tabs .van-tabs__nav--card .van-tab--card.van-tab--active {
color: var(--bx-ink-on-primary);
}
#app .addBankCard__container-content-btn > button.active,
#app .addBankCard__container-content-item .selectB,
#app .addKBZ-btn,
#app .addKBZ-item .selectB,
#app .addtype4_C .selectB,
#app .addtype4_C .sumbitBtn,
#app .bind-bank-sumbit,
#app .bind-container .bind-button button,
#app .upi_C-addbtn,
#app .withdrawWay > div.select,
#app .withdraw__container .pwd .btnD button:nth-of-type(2),
#app .c2cConfirm .btn.active,
#app .c2cConfirm .imgBox .box > div,
#app .StrongBox__container-income-buttom > div + div,
#app .StrongBoxRecordCard__container-first.transferIn .StrongBoxRecordCard__container-buttom,
#app .popup__container-multiple > div.active,
#app .popup-foot > div:first-child {
color: var(--bx-ink-on-primary);
}
/* The bundle forces this one !important, so the correction has to match it. */
#app .wallet-container-content .gameList .select h3 {
color: var(--bx-ink-on-primary) !important;
}
/* ---- Activity, point mall, sign-in, VIP ---------------------------------- */
#app .championship .btn.active,
#app .dailySignIn__container-content__footer button,
#app .dailySignIn__container .task-panel .task-item .btnOther.status2,
#app .signIn__container-button .active,
#app .task-record-container .head > button.active,
#app .package-item-btn,
#app .pointMall__container-treasureActivity button,
#app .pointMall__container-products__content-item__header,
#app .pointMall__container-products__content-item__header-left,
#app .pointMall__container-products__content-item__footer button,
#app .lotteryDetail__container-item__actionSheet > div:nth-of-type(3) > div.activeTicket,
#app .orderDetail__container-content__btn-cancel,
#app .redeem__container-button__right,
#app .redeem-container-receive button,
#app .turntable-page .turntable-item .wallet,
#app .vip-content-myWelfare-con .cards button.active,
#app .vip-content-recordVsrule-con > button {
color: var(--bx-ink-on-primary);
}
/* This one resolves through --text_white (#E8EDF2), not L4 — same failure,
same fix. Found by auditing the `var(--text_white, var(--text_color_L4))`
fallback chain. */
#app .treasure__container__treasure-item__footer-button {
color: var(--bx-ink-on-primary);
}
/* ---- Dialog and popup confirm buttons ------------------------------------ */
#app .dialog-wrapper .dialog-btn,
#app .activity-wrapper .dialog-wrapper .dialog-btn,
#app .dailySignIn__container .dialog-wrapper .dialog-btn,
#app .dialog__container-footer button:first-of-type,
#app .dialog__container-footer button:last-of-type,
#app .newDialog .footer button,
#app .signIn__container .dialogBtn:last-of-type,
#app .dialogBtn:last-of-type,
#app .RpwdPopup-foot .dialogBtn:first-of-type,
#app .cancelOrderDialog .dialog-btnWrapper button:last-of-type,
#app .van-dialog__content-btn,
#app .c2cDetail__CO .van-dialog__content-btn,
#app .cancelW .van-dialog__content-btn,
#app .receiveLottery__container .van-dialog__content-btn,
#app .vip .van-dialog__content-btn > button,
#app .info-dialog .van-dialog .van-dialog__confirm {
color: var(--bx-ink-on-primary);
}
/* ---- Misc. brand-filled actions across main / promotion ------------------ */
#app .footer .btn,
#app .feedback-container-footer button,
#app .content .shareBtnContainer .shareBtn,
#app .btn_group .appeal_admin,
#app .record__main-more,
#app .jackpot-rule-custom,
#app .jackpot-rule-custom svg,
#app .bonus-items .btn.active,
#app .list .item.active,
#app .recycleBtnD button,
#app .features .toActive,
#app .gverify-container-button,
#app .gverify-container-footer .footer-wrapper-button,
#app .verifyInput__container-input button,
#app .updateP-container-button button,
#app .Laundry-page .tab_active,
#app .Laundry-Record .tab_active,
#app .Laundry-page .laundry-page_container .laundry-page_box .btn.active,
#app .slot_list .awardbox .look_more,
#app .gamestats-container-header .van-tabs--card .van-tabs__wrap .van-tab--active,
#app .footer-tabBar .van-tabs__nav--card .van-tab--card.van-tab--active,
#app .firstSaveDialog .header,
#app .funtab_item .tab_active,
#app .noticeBar__container button,
#app .aloneGame .header .right_btn i {
color: var(--bx-ink-on-primary);
}
/* Game LOBBY tab pills — the category switcher, not a game-play control. The
bundle writes these !important, so the correction does too. */
#app .allGames__container .tab_active,
#app .tab_active[data-v-f851bd18],
#app .onlineGames__container .fun-tabs .fun-tab-item.activeClassName span,
#app .onlineGames__container-tabBar .van-tabs__nav--card .van-tab--card.van-tab--active {
color: var(--bx-ink-on-primary) !important;
}
/* --text_color_L4 has exactly one call site that uses it as a SURFACE rather
than as ink — a white order card, now a bright rectangle on a dark page. */
#app .myOrders__container-item {
background: var(--bx-surface) !important;
border: 1px solid var(--bx-hairline);
color: var(--bx-text-hi);
}
/* ============================================================================
2. GRADIENT-CLIPPED HEADINGS
These use background-clip:text with a gradient whose lower stop is alpha 0,
so the bottom of every glyph faded to nothing once the ground went dark.
Most of them read the gradient from var(--Text-effects, ),
and 05-hooks.css redefines --Text-effects opaque — verified as covering
.slot_list .Slot_game, .slot_list .awardbox .title, .slot_list .WinningContainer,
.WinningContainer (4 of 5 scope hashes), .originalmainContainer_title and
.topContainer .title.
Three call sites hardcode the faded gradient with no variable at all, so the
hook cannot reach them. They are the remainder.
============================================================================ */
/* background-IMAGE, not the background shorthand.
`background: !important` also sets background-clip: border-box !important,
which then beats the non-important background-clip: text below it - the glyphs
lose their clip and the heading renders as a solid gold rectangle with
transparent text sitting on it. The longhand touches only the image, and the
clip is marked important so it survives the same fight. */
#app .WinningContainer[data-v-127acf74],
#app .header_title[data-v-1aca5679],
#app .header_title[data-v-5df4fc2f] {
background-image: var(--Text-effects) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent;
}
/* .rankID_column.rank_text was on the audit list but needs no correction: its
gradient runs #fff -> #ffa854 and both stops are fully opaque, so it stays
legible on charcoal. Left untouched on purpose. */
/* ============================================================================
3. MODAL BACKDROPS
rgba(0,0,0,.35–.5) over a #0B0F14 page barely darkens anything, so dialogs
floated with no visible separation from the content behind them.
10-shell.css already deepened .dialog__outside, .van-overlay and
.ar-loading-view. These are the ones it does not reach.
============================================================================ */
#app .popup-overlay,
#app .dialog-bg {
background: var(--bx-scrim) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* The card that floats on .dialog-bg. Its surface already resolves correctly
(var(--body, var(--bg_color_L2)) falls through to the dark card token) but it
had no edge and no shadow, so it merged into the scrim. */
#app .dialog-main-content {
border: 1px solid var(--bx-hairline-2);
box-shadow: var(--bx-e3);
}
/* Its two footer actions were authored for a white card: the cancel button is
#2b2b2b ink on a #e9e9e9 hairline (invisible now), and the confirm button
sets color:var(--body) — a hook we deliberately leave undefined, so the
declaration is invalid and the label inherits near-white onto emerald. */
#app .dialog-main-content-handle-cancel {
border-color: var(--bx-hairline-2);
color: var(--bx-text-hi);
}
#app .dialog-main-content-handle-confirm {
color: var(--bx-ink-on-primary);
}
/* ============================================================================
4. DIM AND INVERTED TEXT
Anything that lands under 4.5:1 on --bx-surface (#141B26). For reference
--bx-text-lo #7C8B9C is ~5.3:1 and passes; --bx-text-mid #93A5B5 is ~7.4:1.
Placeholders are already handled: 10-shell.css sets #app input::placeholder /
textarea / .van-field__control to --bx-text-lo with !important, which beats
every scoped bundle rule regardless of specificity. Only the four rules that
hardcode a near-black placeholder needed catching here — #48586d on the dark
card is roughly 1.9:1.
============================================================================ */
#app .header > div.l2 .inputDom input::-webkit-input-placeholder,
#app .header > div.l2 .inputDom input::placeholder {
color: var(--bx-text-lo);
opacity: 1;
}
/* Dark ink left over from the white-card era. The full audit found five such
declarations; the fifth (.Betting__Popup-head-selectName, color:#000) is on a
betting board and is intentionally not corrected here. */
#app .TeamReportDetail__C-detail-item span {
color: var(--bx-text-hi);
}
#app .TeamReportDetail__C-head-detail {
color: var(--bx-text-mid);
}
#app .video_list .video_item .video_title {
color: var(--bx-text-hi);
}
/* Disabled pay button: a #B6BAD0 light-grey pill still carrying the white
on-primary label, so the text nearly vanished into the fill. Reuse the
platform's disabled treatment instead of a one-off grey. */
#app .rechargeDetail__container-buttons > div > span.disablePayBtn {
background: var(--button_dis_color) !important;
color: var(--bx-text-lo);
}
/* ============================================================================
5. TAP TARGETS
Interactive controls the CSS sizes under 44x44 CSS px. Only the HIT AREA
grows — no rule below changes a rendered size, position or colour, and no
game-play control is included.
Note on units: the bundle's rem base is viewport-derived (1rem = 37.5px at
375px wide), so .56rem ~ 21px and .64rem ~ 24px. Both fall well short.
============================================================================ */
/* Checkboxes and radios (21px icons). Padding grows the pressable box and the
equal negative margin cancels its layout effect, so nothing moves. Done with
padding rather than an ::after pad because .van-checkbox / .van-radio carry
overflow:hidden, which would clip a pseudo-element but never clips padding. */
#app .van-checkbox,
#app .van-radio {
padding-block: 12px;
margin-block: -12px;
}
/* Close buttons. These are all absolutely positioned already, so they must NOT
be given position:relative — the pad hangs off their existing box instead.
.van-icon paints its glyph in ::before, leaving ::after free. */
#app .popup__container-closeBtn::after,
#app .van-popup__close-icon::after,
#app .van-action-sheet__close::after {
content: "";
position: absolute;
inset: -11px;
}
/* ============================================================================
6. FOCUS RINGS
00-base.css defines the :focus-visible ring globally. These selectors kill
the outline unconditionally, which removes it for keyboard and switch-control
users. Restoring it on :focus-visible only means pointer users see no change.
`[class*=van-]:focus{outline:none}` is the wide one — it silences every Vant
control in the app at once.
============================================================================ */
#app [class*="van-"]:focus-visible,
#app .Recharge__content-paymoney__money-input .inp:focus-visible,
#app .chooseBank__container .search input:focus-visible,
#app .dropdown:focus-visible,
#app input[data-v-cb5583fe]:focus-visible {
outline: 2px solid var(--bx-primary);
outline-offset: 2px;
border-radius: var(--bx-r-sm);
}