; its nav-right slot is
containing exactly two (name="down" apk-download arrow +
name="server" blue circle). Verified in render of
page-home-other-bb563938.js (la={id:"home"}, ca={class:"content__right"},
ca -> [ svg name:"down", svg name:"server" ]). Not settings-gated, so
hidden purely via CSS. Extra fallback scope in case the slot renders
outside #home in some builds.
================================================================== */
#home .content__right,
.van-nav-bar .content__right { display: none !important; }
/* ------------------------------------------------------------------
Part 2 — Balance + GREEN "Deposit" button injected into the home
nav-right slot (logic lives in index.html; #dk-home-topbar node is
appended as a sibling of the now-hidden .content__right and anchored
absolute-right in the nav bar). Dark 1win theme; deposit = #12b76a.
------------------------------------------------------------------ */
#dk-home-topbar {
position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: .22rem; z-index: 20;
}
#dk-home-topbar .dk-bal {
font-size: .34rem; font-weight: 700; color: #eaf1ff; white-space: nowrap;
letter-spacing: .2px; max-width: 3.4rem; overflow: hidden; text-overflow: ellipsis;
}
#dk-home-topbar .dk-deposit {
display: inline-block; padding: .1rem .34rem; border-radius: .32rem;
background: #12b76a; color: #ffffff !important; font-size: .32rem; font-weight: 700;
text-decoration: none; line-height: 1.42; white-space: nowrap;
box-shadow: 0 3px 10px rgba(18,183,106,.40);
}
#dk-home-topbar .dk-deposit:active { filter: brightness(.92); }
/* ---- SPLASH FIX 2026-07-22: replace crown-emblem start-page splash with gold 3xwin.fun on dark ---- */
.start-page {
background-image: url(/assets/png/start-3xwin.webp) !important;
background-color: #0b0c10 !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ================= HOME TOP-BAR v2 — login-state aware, premium (2026-07-22) ================= */
#dk-home-topbar { gap: .18rem; }
#dk-home-topbar .dk-btn {
display: inline-flex; align-items: center; justify-content: center;
height: .64rem; padding: 0 .32rem; border-radius: .5rem;
font-size: .3rem; font-weight: 700; line-height: 1; letter-spacing: .2px;
text-decoration: none; white-space: nowrap; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: filter .15s ease, transform .04s ease, box-shadow .15s ease;
}
#dk-home-topbar .dk-btn:active { transform: translateY(1px); filter: brightness(.94); }
/* logged-out */
#dk-home-topbar .dk-login {
color: #eaf1ff !important; background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.34);
}
#dk-home-topbar .dk-register {
color: #3a2600 !important;
background: linear-gradient(180deg,#ffdf7a,#f3b501);
border: 1px solid #f3b501; box-shadow: 0 3px 10px rgba(243,181,1,.38);
}
/* logged-in */
#dk-home-topbar .dk-bal {
display: inline-flex; align-items: center;
height: .64rem; padding: 0 .3rem; border-radius: .5rem;
background: rgba(255,215,94,.12); border: 1px solid rgba(255,215,94,.42);
color: #ffd75e !important; font-weight: 800; font-size: .32rem;
max-width: 2.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dk-home-topbar .dk-withdraw {
color: #eaf1ff !important; background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.34);
}
#dk-home-topbar .dk-deposit {
color: #ffffff !important;
background: linear-gradient(180deg,#19c46f,#12a862);
border: 1px solid #12a862; box-shadow: 0 3px 10px rgba(18,168,98,.42);
}
/* ============ FirstRecharge / "Extra first deposit bonus" popup ============
The "0/10000" progress number (.step) was color:var(--text_color_L1) = WHITE
in the dark theme => invisible on the light bar. Force a dark, high-contrast
number readable on any bar fill. (2026-07-22) */
.progress .step[data-v-bff59ba2] {
color: #14161d !important;
font-weight: 800 !important;
font-size: .28rem !important;
letter-spacing: .2px;
text-shadow: 0 0 2px rgba(255,255,255,.95), 0 1px 1px rgba(255,255,255,.75) !important;
z-index: 2;
}
.progress[data-v-bff59ba2] { border-radius: .4rem !important; }
/* ================= HOME CASINO ENTRY (Spribe / Aviator) — 2026-07-23 =================
Premium home banner + game rail. Node is #dk-casino-banner, injected as the
first child of #home .content by the IIFE in index.html. Dark 1win palette
(bg #0b0c10, accent #1478ff, gold #ffd75e). Classes prefixed dk-casino. */
.dk-casino-card{
position:relative; margin:.24rem .3rem .28rem; padding:.28rem .3rem .26rem;
border-radius:.34rem; cursor:pointer; overflow:hidden;
background:
radial-gradient(120% 140% at 100% 0%, rgba(20,120,255,.30) 0%, rgba(20,120,255,0) 55%),
linear-gradient(160deg,#12203c 0%,#0b0c10 62%);
border:1px solid rgba(20,120,255,.42);
box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
-webkit-tap-highlight-color:transparent;
animation:dk-casino-in .4s ease both;
}
@keyframes dk-casino-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dk-casino-card:active{transform:translateY(1px);filter:brightness(.96)}
/* sweeping shine */
.dk-casino-glow{
position:absolute; top:-40%; left:-30%; width:60%; height:180%; pointer-events:none;
background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
transform:skewX(-18deg); filter:blur(2px);
animation:dk-casino-sweep 3.6s ease-in-out infinite;
}
@keyframes dk-casino-sweep{0%{left:-40%}55%{left:130%}100%{left:130%}}
.dk-casino-main{position:relative; display:flex; align-items:center; gap:.24rem}
.dk-casino-plane{
font-size:.6rem; line-height:1; flex:0 0 auto;
filter:drop-shadow(0 3px 6px rgba(20,120,255,.6));
animation:dk-casino-fly 3.2s ease-in-out infinite;
}
@keyframes dk-casino-fly{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-.08rem) rotate(2deg)}}
.dk-casino-text{flex:1 1 auto; min-width:0}
.dk-casino-title{
font-size:.38rem; font-weight:800; color:#ffffff; letter-spacing:.2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-casino-sub{
margin-top:.05rem; font-size:.26rem; font-weight:600; letter-spacing:.3px;
color:#ffd75e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-casino-cta{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
height:.66rem; padding:0 .36rem; border-radius:.5rem;
font-size:.32rem; font-weight:800; color:#04122b !important; white-space:nowrap;
background:linear-gradient(180deg,#4aa2ff,#1478ff);
border:1px solid #1478ff; box-shadow:0 4px 14px rgba(20,120,255,.5);
animation:dk-casino-pulse 2s ease-in-out infinite;
}
@keyframes dk-casino-pulse{0%,100%{box-shadow:0 4px 14px rgba(20,120,255,.45)}50%{box-shadow:0 4px 22px rgba(20,120,255,.85)}}
.dk-casino-rail{
position:relative; display:flex; gap:.16rem; margin-top:.24rem;
overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.dk-casino-rail::-webkit-scrollbar{display:none}
.dk-casino-chip{
flex:0 0 auto; display:inline-flex; align-items:center; gap:.1rem;
height:.56rem; padding:0 .26rem; border-radius:.42rem;
font-size:.28rem; font-weight:700; color:#eaf1ff; white-space:nowrap;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.dk-casino-chip .dk-casino-ico{font-size:.32rem; line-height:1}
/* ==================================================================
HOME CASINO GRID (Spribe · 13 games) — 2026-07-24
Node is #dk-casino-grid, injected DIRECTLY BENEATH the Lottery
("aloneGame") block inside #home .content by the IIFE at the bottom
of index.html. Dark 1win palette: bg #0b0c10, card #15171d,
accent #1478ff, gold #ffd75e. Classes prefixed dk-cg.
================================================================== */
#dk-casino-grid{
margin:.3rem 0 .1rem; padding:0;
animation:dk-cg-in .38s ease both;
}
@keyframes dk-cg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- section header ---- */
.dk-cg-head{
display:flex; align-items:center; gap:.18rem;
padding:0 .04rem .22rem;
}
.dk-cg-head .dk-cg-bar{
flex:0 0 auto; width:.08rem; height:.42rem; border-radius:.06rem;
background:linear-gradient(180deg,#4aa2ff,#1478ff);
box-shadow:0 0 10px rgba(20,120,255,.75);
}
.dk-cg-head .dk-cg-h{
flex:1 1 auto; min-width:0;
font-size:.36rem; font-weight:800; letter-spacing:.2px; color:#fff;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-cg-head .dk-cg-h em{font-style:normal; color:#ffd75e}
.dk-cg-head .dk-cg-count{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
min-width:.44rem; height:.36rem; padding:0 .14rem; border-radius:.3rem;
font-size:.24rem; font-weight:800; color:#04122b;
background:linear-gradient(180deg,#ffe488,#ffc94a);
}
.dk-cg-head .dk-cg-all{
flex:0 0 auto; display:inline-flex; align-items:center; gap:.06rem;
height:.44rem; padding:0 .22rem; border-radius:.34rem;
font-size:.26rem; font-weight:700; color:#eaf1ff;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.dk-cg-head .dk-cg-all:active{filter:brightness(1.2)}
/* ---- grid: 3 per row ---- */
.dk-cg-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:.18rem;
}
.dk-cg-tile{
position:relative; overflow:hidden;
border-radius:.24rem;
background:#15171d;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 6px 16px rgba(0,0,0,.45);
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
-webkit-tap-highlight-color:transparent;
}
.dk-cg-tile:active{
transform:translateY(1px) scale(.985);
border-color:rgba(20,120,255,.55);
box-shadow:0 4px 12px rgba(20,120,255,.35);
}
.dk-cg-thumb{
position:relative; width:100%; aspect-ratio:3/4;
background:linear-gradient(145deg,#1b2030 0%,#10131b 100%);
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.dk-cg-thumb img{
width:100%; height:100%; object-fit:cover; display:block;
background:transparent;
}
/* graceful fallback tile (no logo / broken image) */
.dk-cg-fb{
position:absolute; inset:0; display:none;
align-items:center; justify-content:center; text-align:center;
padding:.12rem;
font-size:.28rem; font-weight:800; line-height:1.15; color:#fff;
letter-spacing:.2px;
background:linear-gradient(145deg,#1478ff 0%,#0d3f8f 48%,#141826 100%);
text-shadow:0 2px 6px rgba(0,0,0,.55);
}
.dk-cg-tile.is-fb .dk-cg-thumb img{display:none}
.dk-cg-tile.is-fb .dk-cg-fb{display:flex}
.dk-cg-name{
display:block; padding:.14rem .12rem .16rem;
font-size:.24rem; font-weight:700; color:#dfe7f5; text-align:center;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
}
/* ---- Aviator hero tile (first) ---- */
.dk-cg-tile.dk-cg-hot{
border-color:rgba(255,201,74,.55);
box-shadow:0 6px 20px rgba(255,201,74,.22), 0 6px 16px rgba(0,0,0,.5);
}
.dk-cg-tile.dk-cg-hot .dk-cg-name{color:#ffd75e}
.dk-cg-badge{
position:absolute; top:.1rem; left:.1rem; z-index:2;
display:inline-flex; align-items:center;
height:.3rem; padding:0 .14rem; border-radius:.2rem;
font-size:.2rem; font-weight:800; letter-spacing:.4px; color:#04122b;
background:linear-gradient(180deg,#ffe488,#ffc94a);
box-shadow:0 2px 8px rgba(0,0,0,.5);
}
/* ==================================================================
HOME TOP-BAR OVERLAP FIX + PROFESSIONAL REDESIGN (2026-07-28)
Root cause of the "$500 overlapping the logo" bug: an earlier pass
hides the original .content__right slot with display:none, which
removes it from flex flow entirely -> the logo/left side of the
header (unknown markup, compiled Vue, no source) was then free to
grow into the space where our absolutely-positioned #dk-home-topbar
sits, especially once a 4th control (logout) was added.
Fix has two independent layers so it holds regardless of the
logo's actual (unknown) class name:
1. Structural: :has() finds #dk-home-topbar's real parent (no
matter what it's called) and caps every OTHER child's width,
reserving room on the right. :has() is already relied on
elsewhere in this file (the Super Jackpot hider), so it's
confirmed supported in-app.
2. The topbar itself is redesigned to be materially more compact
(icon-only secondary actions) so the reserved gap is small and
the header reads clean on a 360-430px phone.
================================================================== */
*:has(> #dk-home-topbar) {
display: flex !important;
align-items: center !important;
}
*:has(> #dk-home-topbar) > *:not(#dk-home-topbar) {
min-width: 0 !important;
max-width: calc(100% - 4rem) !important;
overflow: hidden !important;
}
*:has(> #dk-home-topbar) > *:not(#dk-home-topbar) img,
*:has(> #dk-home-topbar) > *:not(#dk-home-topbar) svg {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* ---- compact cluster: balance chip + icon Withdraw + Deposit CTA + icon Logout ---- */
#dk-home-topbar { gap: .14rem; }
#dk-home-topbar .dk-bal {
max-width: 1.6rem;
padding: 0 .22rem;
font-size: .3rem;
}
#dk-home-topbar .dk-btn.dk-deposit { padding: 0 .28rem; font-size: .28rem; }
#dk-home-topbar .dk-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
width: .58rem; height: .58rem; border-radius: 50%;
color: #eaf1ff; background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.22);
-webkit-tap-highlight-color: transparent; cursor: pointer;
transition: filter .15s ease, transform .04s ease;
}
#dk-home-topbar .dk-icon-btn svg { width: .32rem; height: .32rem; display: block; }
#dk-home-topbar .dk-icon-btn:active { transform: translateY(1px); filter: brightness(.9); }
#dk-home-topbar .dk-logout { border-color: rgba(255,110,110,.34); color: #ff8f8f; }