/* 🎰 Casino skin for every customer page (same look as the "Invite friends" popup):
 * deep maroon + purple, gold frames, fat orange/green 3D buttons, purple-white titles.
 * Loaded LAST on the customer pages, so it wins over style.css / customer.css / page styles.
 * The look is the same in the light and the dark setting (a casino has no light mode).
 */
:root,:root[data-theme="light"],:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1c0612; --panel:#2c0a1f; --raised:#3d1230; --line:#6a2a55; --fg:#fff5e8; --muted:#d9b3c9;
  --accent:#ffbf1f; --accent-ink:#3a1400; --accent-text:#ffd84a;
  --me:#4a1a6e; --them:#3d1230;
  --open:#56c8ff; --good:#4ade80; --bad:#ff5a6e;
  --violet:#8a2bd8; --pink:#ff4fa8;
  --glass:linear-gradient(180deg,rgba(74,20,58,.92),rgba(40,8,30,.94));
  --sk-gold:#f5c518; --sk-purple:#8a2bd8; --sk-frame:0 0 0 2px #f5c518 inset,0 0 0 4px rgba(0,0,0,.28) inset;
  --glow:0 0 0 2px #f5c518,0 14px 34px -12px rgba(255,191,31,.55);
}
html body.cust{
  background:
    radial-gradient(900px 520px at 85% -8%,rgba(138,43,216,.45),transparent 70%),
    radial-gradient(760px 460px at -12% 22%,rgba(255,79,168,.22),transparent 70%),
    radial-gradient(1200px 700px at 50% 110%,rgba(255,140,0,.16),transparent 70%),
    linear-gradient(180deg,#2a0718,#16040d);
  background-attachment:fixed;color:var(--fg);
}
/* the moon/sun button does nothing in the casino look */
html body.cust .theme-btn{display:none}

/* ---- header + bottom bar ---- */
html body.cust .cnav{background:linear-gradient(180deg,rgba(58,10,40,.96),rgba(34,6,24,.92));border-bottom:2px solid rgba(245,197,24,.55);box-shadow:0 6px 18px -8px rgba(0,0,0,.7)}
html body.cust .ctabs{background:rgba(0,0,0,.25);border:1px solid rgba(245,197,24,.35)}
html body.cust .ctabs a{color:#e9c9da}
html body.cust .ctabs a[aria-current="page"]{background:linear-gradient(180deg,#8a2bd8,#5122c4);color:#fff;box-shadow:inset 0 0 0 1px #c99bff,0 3px 0 #2a0d6e}
html body.cust .bnav,html.app-mode body.cust .bnav{background:linear-gradient(180deg,#3a0d2c,#1e0514);border-top:2px solid rgba(245,197,24,.6);box-shadow:0 -10px 26px -10px rgba(0,0,0,.8)}
html body.cust .bitem{color:#d9b3c9}
html body.cust .bitem[aria-current="page"]{color:#ffd84a}
html body.cust .bitem[aria-current="page"] .bic{background:linear-gradient(180deg,#8a2bd8,#5122c4);box-shadow:0 0 0 1px #c99bff,0 0 14px rgba(138,43,216,.6)}
html body.cust .bitem[aria-current="page"] svg{color:#fff}
html body.cust .icon-btn,html body.cust .acct-btn,html body.cust .cnav .sound-btn,html body.cust .lang-btn{background:linear-gradient(180deg,#4a1640,#2c0a22);border:1px solid rgba(245,197,24,.45);color:#ffe9b0}
html body.cust .pts,html body.cust .bbadge{background:linear-gradient(180deg,#ffd84a,#ff9d00);color:#3a1400;box-shadow:0 2px 0 #a24400}

/* ---- cards: maroon box with a gold + purple frame ---- */
html body.cust .gcard,html body.cust .card{
  background:radial-gradient(ellipse at 50% 0,rgba(122,24,56,.95),rgba(58,7,24,.96) 60%,rgba(36,3,14,.97));
  border:2px solid var(--sk-purple);border-radius:20px;color:var(--fg);
  box-shadow:var(--sk-frame),0 14px 34px -14px rgba(0,0,0,.8),0 0 26px -8px rgba(138,43,216,.45);backdrop-filter:none}
html body.cust .gcard h2,html body.cust .card h2,html body.cust .h-display{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,#e6c6ff 45%,#b26bff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a0b6a) drop-shadow(0 0 6px rgba(178,107,255,.45))}
html body.cust .kicker{color:#ffd84a;font-family:var(--f-display);font-weight:700;letter-spacing:.16em;text-shadow:0 1px 0 #7a2a00}
html body.cust .grad-text{background:linear-gradient(180deg,#fff3a0,#ffd84a 45%,#ff9d00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #7a2a00)}
html body.cust .hint,html body.cust p{color:var(--muted)}
html body.cust a{color:#ffd84a}

/* ---- buttons: orange 3D pill; ghost = purple 3D pill ---- */
html body.cust .btn{
  border-radius:999px;border:2px solid #ffe08a;padding:11px 22px;font-family:var(--f-display);font-weight:800;letter-spacing:.03em;
  background:linear-gradient(180deg,#ffb23a,#ff8a00 55%,#f06a00);color:#fff;text-shadow:0 2px 0 #b54d00;
  box-shadow:0 4px 0 #a24400,0 8px 18px -6px rgba(0,0,0,.6);transition:transform .08s,box-shadow .08s}
html body.cust .btn:hover{filter:brightness(1.08)}
html body.cust .btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #a24400}
html body.cust .btn:disabled{background:linear-gradient(180deg,#bfbfbf,#8c8c8c);border-color:#ddd;box-shadow:0 3px 0 #5e5e5e;text-shadow:0 1px 0 #555;opacity:.85}
html body.cust .btn.ghost{background:linear-gradient(180deg,#7a3ae8,#5122c4);border-color:#c99bff;color:#fff;text-shadow:0 2px 0 #2a0d6e;box-shadow:0 4px 0 #2a0d6e,0 8px 18px -6px rgba(0,0,0,.6)}
html body.cust .btn.danger{background:linear-gradient(180deg,#ff5a6e,#b3122e);border-color:#ffb3bd;color:#fff;text-shadow:0 2px 0 #6b0718;box-shadow:0 4px 0 #6b0718}
html body.cust .btn.sm{padding:6px 14px;font-size:13px;box-shadow:0 3px 0 #a24400}
html body.cust .btn.ghost.sm{box-shadow:0 3px 0 #2a0d6e}

/* ---- form fields ---- */
html body.cust .input,html body.cust .field input,html body.cust .field textarea,html body.cust .field select,html body.cust input[type=text],html body.cust input[type=number],html body.cust input[type=tel],html body.cust input[type=email],html body.cust input[type=password],html body.cust textarea,html body.cust select{
  background:rgba(20,2,12,.75);border:1.5px solid #7a3a66;color:#fff5e8;border-radius:12px}
html body.cust input:focus,html body.cust textarea:focus,html body.cust select:focus{border-color:#ffd84a;box-shadow:0 0 0 3px rgba(255,216,74,.25);outline:none}
html body.cust .field label{color:#ffd84a}

/* ---- rewards page ---- */
html body.cust .balance{
  background:radial-gradient(ellipse at 20% 0,rgba(255,191,31,.28),transparent 60%),linear-gradient(135deg,#5122c4,#3a0d6e 45%,#5a0f2e);
  border:2px solid #f5c518;box-shadow:0 0 0 2px rgba(138,43,216,.8) inset,0 16px 36px -14px rgba(0,0,0,.8),0 0 30px -8px rgba(255,191,31,.4)}
html body.cust .balance .num{color:#ffe14d;-webkit-text-stroke:1.5px #7a2a00;paint-order:stroke fill;text-shadow:0 4px 0 #a33f00,0 10px 20px rgba(0,0,0,.5)}
html body.cust .balance .num small{color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 #2a0d6e}
html body.cust .balance p{color:#e9d5ff}
html body.cust .medal{border-color:rgba(255,216,74,.55)}
html body.cust .stat,html body.cust .stats3 .stat{background:linear-gradient(180deg,#ffd84a,#ffb000);border:2px solid #fff3b0;border-radius:14px;color:#5a2a00;box-shadow:0 4px 0 #b36b00}
html body.cust .stat b{color:#7a1838;font-family:var(--f-display)} html body.cust .stat span{color:#7a3a00;font-weight:700}
html body.cust .li,html body.cust .hitem,html body.cust .vip-step,html body.cust .rc-box,html body.cust .code,html body.cust .how>div{
  background:linear-gradient(180deg,rgba(106,43,224,.35),rgba(60,18,110,.35));border:1px solid rgba(201,155,255,.45);border-radius:14px;color:var(--fg)}
html body.cust .vip-step.on,html body.cust .vip-step.cur{border-color:#ffd84a;box-shadow:0 0 0 2px #ffd84a,0 0 18px rgba(255,216,74,.35)}
html body.cust .how .n{background:linear-gradient(180deg,#ffd84a,#ff9d00);color:#3a1400;box-shadow:0 3px 0 #a24400}
html body.cust .ci-days>*{background:linear-gradient(180deg,#6a2be0,#4a1fb3);border:1px solid #9a7bff;color:#fff;border-radius:12px}
html body.cust .ci-days .done,html body.cust .ci-days .on{background:linear-gradient(180deg,#5ef08a,#18b04c);border-color:#bbf7d0;color:#053b17}
html body.cust .ci-days .today{box-shadow:0 0 0 2px #ffd84a,0 0 14px rgba(255,216,74,.5)}
html body.cust .share a,html body.cust .share button{background:linear-gradient(180deg,#7a3ae8,#5122c4);border:1px solid #c99bff;color:#fff;border-radius:999px;box-shadow:0 3px 0 #2a0d6e}
html body.cust .share a.wa{background:linear-gradient(180deg,#4ade80,#16a34a);border-color:#bbf7d0;box-shadow:0 3px 0 #0b5e2a}

/* progress bars anywhere (VIP, play-through...) */
html body.cust .vip-bar,html body.cust .prog,html body.cust progress{background:#5a2a12;border-radius:9px;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
html body.cust .vip-bar>*,html body.cust .prog>*{background:linear-gradient(180deg,#7cf27c,#22b04a)!important;border-radius:9px}

/* pop-ups and sheets */
html body.cust .modal,html body.cust .sheet,html body.cust dialog,html body.cust .ds-pop,html body.cust .wl-pop{
  background:radial-gradient(ellipse at 50% 0,#7a1838,#3a0718 55%,#24030e);border:3px solid #8a2bd8;border-radius:22px;color:#fff;
  box-shadow:0 0 0 2px #f5c518 inset,0 24px 60px rgba(0,0,0,.7),0 0 40px rgba(138,43,216,.45)}
html body.cust .toast{background:linear-gradient(180deg,#5122c4,#3a0d6e);border:2px solid #f5c518;color:#fff}

/* ---- pages built on the casino lobby look (wallet, home): same maroon + gold ---- */
html body.cust.casino{
  --cz-bg:#1c0612;--cz-bg2:#2a0a1d;--cz-panel:#3a0f2b;--cz-line:#7a2f63;--cz-ink:#fff5e8;--cz-mute:#e0bcd2;
  --cz-gold:#ffd84a;--cz-gold2:#ff9d00;
  background:radial-gradient(900px 520px at 85% -8%,rgba(138,43,216,.45),transparent 70%),radial-gradient(760px 460px at -12% 22%,rgba(255,79,168,.22),transparent 70%),linear-gradient(180deg,#2a0718,#16040d)!important;background-attachment:fixed!important}
html body.cust.casino .cz-top{background:linear-gradient(180deg,rgba(58,10,40,.97),rgba(34,6,24,.94));border-bottom:2px solid rgba(245,197,24,.55)}
html body.cust.casino .cz-ib{background:linear-gradient(180deg,#4a1640,#2c0a22);border-color:rgba(245,197,24,.5);color:#ffe9b0}
html body.cust .wl-bal{background:radial-gradient(ellipse at 20% 0,rgba(255,191,31,.3),transparent 60%),linear-gradient(135deg,#5122c4,#3a0d6e 45%,#5a0f2e);border:2px solid #f5c518;box-shadow:0 0 0 2px rgba(138,43,216,.8) inset,0 16px 36px -14px rgba(0,0,0,.8)}
html body.cust .wl-bal small{color:#e9d5ff}
html body.cust .wl-bal b{color:#ffe14d;-webkit-text-stroke:1.2px #7a2a00;paint-order:stroke fill;text-shadow:0 4px 0 #a33f00}
html body.cust .wl-bal b i{color:#fff;-webkit-text-stroke:0}
html body.cust .wl-tabs{background:rgba(0,0,0,.28);border:2px solid #8a2bd8;box-shadow:0 0 0 1px #f5c518 inset}
html body.cust .wl-tabs button{color:#e0bcd2}
html body.cust .wl-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#ffb23a,#ff8a00 55%,#f06a00);color:#fff;text-shadow:0 2px 0 #b54d00;box-shadow:0 4px 0 #a24400}
html body.cust .wl-m,html body.cust .wl-card,html body.cust .wl-tx,html body.cust .wl-acc,html body.cust .wl-w{background:radial-gradient(ellipse at 50% 0,rgba(122,24,56,.9),rgba(58,7,24,.92));border:2px solid #7a3ae8;border-radius:16px;color:#fff5e8}
html body.cust .wl-m[aria-pressed="true"],html body.cust .wl-w[aria-pressed="true"]{border-color:#ffd84a;box-shadow:0 0 0 2px #ffd84a,0 0 18px rgba(255,216,74,.4)}
html body.cust .wl-go,html body.cust .wl-get{border-radius:999px;border:2px solid #ffe08a;background:linear-gradient(180deg,#ffb23a,#ff8a00 55%,#f06a00);color:#fff;font-weight:800;text-shadow:0 2px 0 #b54d00;box-shadow:0 4px 0 #a24400}
html body.cust .wl-go:disabled,html body.cust .wl-get:disabled{background:linear-gradient(180deg,#bfbfbf,#8c8c8c);border-color:#ddd;box-shadow:0 3px 0 #5e5e5e;text-shadow:none}
html body.cust .wl-bonus{background:linear-gradient(100deg,#ff9a1f,#ff7a00 60%,#ffb14a);border:2px solid #fff;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
html body.cust .wl-bonus *{color:#fff}
html body.cust .wl-note,html body.cust .wl-closed,html body.cust .wl-mnote{background:linear-gradient(100deg,#2a8cff,#1460e6);border:2px solid #cfe3ff;color:#fff}
html body.cust .wl-help{border-color:rgba(245,197,24,.5);background:rgba(0,0,0,.18)}
html body.cust .wl-chips button{background:linear-gradient(180deg,#7a3ae8,#5122c4);border:1px solid #c99bff;color:#fff;border-radius:999px;box-shadow:0 3px 0 #2a0d6e}
html body.cust .wl-step{color:#ffd84a}

/* ---- one bottom bar on every page: Home · Games · big Deposit · Rewards · Profile ---- */
html body.cust .cz-bnav{position:fixed;z-index:30;left:0;right:0;bottom:0;grid-template-columns:repeat(5,1fr);align-items:end;
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,#3a0d2c,#1e0514);border-top:2px solid rgba(245,197,24,.6);box-shadow:0 -10px 26px -10px rgba(0,0,0,.8)}
html body.cust .cz-bnav:not(.bnav){display:grid}
html body.cust .cz-bi{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;border:0;background:none;color:#e0bcd2;text-decoration:none;cursor:pointer;font:inherit;min-width:0}
html body.cust .cz-bi span{font-size:24px;line-height:1;filter:grayscale(.5)}
html body.cust .cz-bi small{font:600 13px var(--f-display);white-space:nowrap}
html body.cust .cz-bi.on,html body.cust .cz-bi[aria-current]{color:#ffd84a}
html body.cust .cz-bi.on span{filter:none}
html body.cust .cz-mid{position:relative}
html body.cust .cz-plus{display:grid!important;place-items:center;width:66px;height:66px;margin-top:-34px;border-radius:50%;font:700 40px/1 var(--f-display)!important;color:#fff;filter:none!important;
  background:radial-gradient(circle at 40% 30%,#fdba74,#f97316 55%,#c2410c);border:4px solid #1e0514;box-shadow:0 0 0 2px rgba(249,115,22,.6),0 0 22px rgba(249,115,22,.55)}
html body.cust .cz-mid small{color:#ffb23a}
/* bottom bar pictures (js/art.js) — same size on every page */
html body.cust .cz-bi span:has(img){display:grid;place-items:center;width:30px;height:30px;font-size:0;filter:none}
html body.cust .cz-bi span img{width:30px;height:30px;max-width:30px;max-height:30px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
html body.cust .cz-bi:not(.on) span img{filter:saturate(.75) brightness(.9) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
html body.cust .wl-get.hold.bad{background:linear-gradient(180deg,#ff5a6e,#b3122e)!important;border-color:#ffb3bd!important;box-shadow:0 4px 0 #6b0718!important}
/* Rewards / Profile / Support use the same casino top bar + bottom bar as Home and Games */
html body.cust.cz-shell{padding-bottom:calc(var(--bnav-h,84px) + 28px)!important}
html body.cust.cz-shell .cz-top{background:linear-gradient(180deg,rgba(58,10,40,.97),rgba(34,6,24,.94));border-bottom:2px solid rgba(245,197,24,.55)}
/* ⭐ rate the app */
.rate-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.rate-box{width:min(380px,100%);background:linear-gradient(180deg,#3a0a18,#1a0509);border:2px solid #f5c66b;border-radius:18px;padding:18px;display:grid;gap:12px;color:#fff}
.rate-box h3{margin:0;font:800 18px var(--f-display,system-ui);color:#ffe08a;text-align:center}
.rate-stars{display:flex;justify-content:center;gap:6px}.rate-stars button{border:0;background:none;font-size:38px;line-height:1;color:#fbbf24;cursor:pointer;padding:0 2px}
.rate-box textarea{width:100%;border-radius:10px;border:1px solid rgba(245,198,107,.4);background:rgba(0,0,0,.35);color:#fff;padding:10px;font:14px var(--f-body,system-ui);resize:vertical}
.rate-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* deposit: quick amounts + bonus tiers */
.wl-qa{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.wl-qa button{position:relative;padding:12px 6px!important;border-radius:12px!important;font:800 16px var(--f-display,system-ui)!important;background:linear-gradient(180deg,#4a1226,#2a0812)!important;border:1.5px solid rgba(245,198,107,.45)!important;color:#fff!important}
.wl-qa button.on{background:linear-gradient(180deg,#ffd84a,#f5a800)!important;color:#3a1a00!important;border-color:#fff3b0!important}
.wl-qa button i{position:absolute;top:-8px;right:-4px;font:800 10.5px system-ui;font-style:normal;background:#16a34a;color:#fff;padding:2px 6px;border-radius:8px}
.wl-ql{display:block;font-size:13px;opacity:.8;margin-bottom:6px}
.wl-tiers{display:grid;gap:8px}
.wl-tier-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.wl-tier{display:grid;justify-items:center;padding:8px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(245,198,107,.4)}
.wl-tier em{font:900 24px var(--f-display,system-ui);font-style:normal;color:#ffe08a}
.wl-bopt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(22,163,74,.12);border:1px solid rgba(74,222,128,.4);font-size:13.5px;line-height:1.4;cursor:pointer}
.wl-bopt[hidden]{display:none}
.wl-bopt input{width:20px;height:20px;accent-color:#16a34a;flex:none;margin-top:1px}
/* support moved from the top bar to Profile */
.cz-sup,.sup-btn{display:none!important}
.cz-top>.cz-bal{margin-left:auto}
.pf-help .pf-sup{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px;font-size:16px;text-decoration:none}
.pf-dot{position:absolute;top:8px;right:12px;min-width:12px;height:12px;border-radius:6px;background:#ef4444;box-shadow:0 0 0 2px #fff}