/* SpinZone mobile lobby — matches React design tokens 1:1 */
:root{
  --lb-bg:#eef1f6;
  --lb-fg:#1f2937;
  --lb-muted:#6b7280;
  --lb-card:#ffffff;
  --lb-border:#e5e7eb;
  --lb-primary:#2b4fa8;
  --lb-primary-2:#5678d1;
  --lb-header:#2647a1;
  --lb-header-fg:#f6f8ff;
  --lb-gold-1:#4a6dc2;
  --lb-gold-2:#2a4aa4;
  --lb-destructive:#dc2626;
  --lb-blue-circle:#1e50a2;
  --lb-shadow-card:0 16px 40px -20px rgba(30,50,120,.28);
  --lb-shadow-gold:0 10px 40px -10px rgba(43,79,168,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.lobby{
  background:var(--lb-bg);
  color:var(--lb-fg);
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  padding-bottom:76px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;padding:0}
img{max-width:100%;display:block}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}

.wrap-md{max-width:28rem;margin:0 auto}
.lb-header-bg{background:var(--lb-header);color:var(--lb-header-fg)}

/* ---------- Top bar ---------- */
.lb-topbar{position:sticky;top:0;z-index:40;background:var(--lb-header);color:var(--lb-header-fg)}
.lb-topbar .inner{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 12px;max-width:28rem;margin:0 auto}
.lb-topbar .brand{display:flex;align-items:center;gap:4px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.lb-topbar .btn-icon{display:grid;place-items:center;width:24px;height:24px;color:rgba(255,255,255,.9)}
.lb-topbar .actions{display:flex;align-items:center;gap:8px}
.lb-topbar .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:rgba(255,255,255,.12);padding:6px 12px;color:#fff;font-size:11px;font-weight:700;line-height:1}
.lb-topbar .chip:hover{background:rgba(255,255,255,.22)}

/* ---------- Marquee ---------- */
.lb-marquee{max-width:28rem;margin:0 auto;display:flex;align-items:center;gap:8px;overflow:hidden;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);padding:4px 12px}
.lb-marquee svg{width:16px;height:16px;flex-shrink:0}
.lb-marquee .track{flex:1;overflow:hidden;position:relative;display:flex}
.lb-marquee .track p{margin:0;display:inline-block;white-space:nowrap;font-size:11px;font-weight:500;color:rgba(255,255,255,.9);animation:lb-mq 15s linear infinite;will-change:transform}
@keyframes lb-mq{0%{transform:translateX(10%)}100%{transform:translateX(-100%)}}

/* ---------- Promo banner ---------- */
.lb-promo{background:#fff}
.lb-promo-inner{max-width:28rem;margin:0 auto;padding:8px 12px 2px}
.lb-promo .slides{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--lb-border);box-shadow:var(--lb-shadow-card);background:#0b1220;aspect-ratio:16/6;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.lb-promo .slides:active{cursor:grabbing}
.lb-promo .track{display:flex;width:100%;height:100%;will-change:transform;transform:translate3d(0,0,0)}
.lb-promo .slide{flex:0 0 100%;width:100%;height:100%;position:relative;overflow:hidden}
.lb-promo .slide a{display:block;width:100%;height:100%;position:relative}
.lb-promo .slide img.fg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:fill;object-position:center;pointer-events:none;-webkit-user-drag:none}
.lb-promo .dots{display:flex;justify-content:center;gap:6px;margin-top:4px;margin-bottom:0}
.lb-promo .dot{width:16px;height:2px;border-radius:999px;background:var(--lb-border);cursor:pointer;transition:all .25s ease;border:0;padding:0}
.lb-promo .dot.active{background:var(--lb-primary)}

/* ---------- Category nav ---------- */
.lb-cats{position:relative;max-width:28rem;margin:0 auto;border-top:1px solid rgba(255,255,255,.15)}
.lb-cats .row{display:flex;gap:4px;overflow-x:auto;padding:6px 8px;scroll-behavior:auto;touch-action:pan-x}
.lb-cats .cat{flex-shrink:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 14px;border-radius:12px;color:rgba(255,255,255,.8);text-decoration:none}
.lb-cats .cat:hover{color:var(--lb-header-fg)}
.lb-cats .cat.active{color:var(--lb-header-fg);background:rgba(255,255,255,.16)}
.lb-cats .cat img{height:28px;width:28px;object-fit:contain}
.lb-cats .cat span{font-size:12px;font-weight:600;line-height:1;white-space:nowrap}

.lb-cats .underline{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.25)}

/* ---------- Balance panel ---------- */
.lb-bal{max-width:28rem;margin:0 auto;padding:6px 12px}
.lb-bal .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lb-bal .name{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--lb-header-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-bal .amt{font-size:18px;font-weight:800;color:var(--lb-header-fg)}
.lb-bal .divider{width:1px;height:36px;background:rgba(255,255,255,.25)}
.lb-bal .quick{display:flex;align-items:center;gap:10px}
.lb-bal .q{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.9)}
.lb-bal .q .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.2)}
.lb-bal .q span{font-size:10px;font-weight:600;line-height:1}

/* ---------- Section heading ---------- */
.lb-sec{max-width:28rem;margin:0 auto;padding:12px 12px 16px}
.lb-sec .h{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.lb-sec .h .bar{width:4px;height:16px;border-radius:999px;background:var(--lb-primary)}
.lb-sec .h .bar.red{background:var(--lb-destructive)}
.lb-sec .h h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.lb-sec .h .flame{color:var(--lb-destructive);width:16px;height:16px}

/* ---------- Hot games grid — canonical rules live in the #lb-hot block below ---------- */



.lb-more{display:flex;justify-content:center;margin-top:12px}
.lb-more button{border:1px solid var(--lb-border);background:var(--lb-card);border-radius:999px;padding:6px 16px;font-size:12px;font-weight:700}
.lb-more button:hover{border-color:var(--lb-primary);color:var(--lb-primary)}

/* ---------- Category providers grid ---------- */
.lb-provs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lb-prov{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:6px;border:1px solid var(--lb-border);border-radius:8px;background:var(--lb-card);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s;min-width:0;height:82px;box-sizing:border-box;overflow:hidden}
.lb-prov:hover{transform:scale(1.03);border-color:var(--lb-primary)}
.lb-prov .lg{display:grid;place-items:center;width:100%;height:40px;min-height:40px;overflow:hidden;border-radius:6px;background:#fff;padding:4px;box-sizing:border-box}
.lb-prov .lg img{max-height:32px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.lb-prov .lg .fb{font-size:10px;font-weight:800;color:var(--lb-primary)}
.lb-prov .nm{width:100%;min-width:0;text-align:center}
.lb-prov .nm p{margin:0;font-size:9px;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-prov .nm .c{font-size:8px;color:var(--lb-muted);line-height:1.1}

/* ---------- Payment methods / social banner rows ---------- */
.lb-imgrow{max-width:28rem;margin:0 auto;padding:0 12px 16px}
.lb-imgrow img{width:100%;height:auto}

/* ---------- Sponsors / ambassadors ---------- */
.lb-people{max-width:28rem;margin:0 auto;padding:0 12px 24px}
.lb-people .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lb-people .item{display:flex;gap:10px;align-items:flex-start}
.lb-people .item .lg{width:32px;height:32px;background:center/contain no-repeat;flex-shrink:0;margin-top:2px}
.lb-people .item h3{margin:0;font-size:12px;font-weight:700;line-height:1.2}
.lb-people .item p{margin:0;font-size:10px;font-style:italic;color:var(--lb-muted)}

/* ---------- App download banner ---------- */
.lb-app{background:#1e3a8a;color:#fff;border-bottom:1px solid #1e3a6f;box-shadow:0 -4px 16px rgba(0,0,0,.3)}
.lb-app .inner{max-width:28rem;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px}
.lb-app .x{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;color:#fff;flex-shrink:0}
.lb-app .x:hover{background:rgba(255,255,255,.1)}
.lb-app .ico{position:relative;flex-shrink:0}
.lb-app .ico img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.lb-app .hot{position:absolute;top:-6px;left:-4px;background:#e11d48;color:#fff;font-size:9px;font-weight:900;line-height:1.1;padding:1px 4px;border-radius:2px}
.lb-app .txt{min-width:0;flex:1}
.lb-app .txt .t{font-size:13px;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-app .txt .s{font-size:11px;color:#fcd34d;line-height:1.1}
.lb-app .dl{flex-shrink:0;background:#fff;color:#1e3a8a;font-weight:700;font-size:12px;padding:8px 16px;border-radius:6px}
.lb-app .dl:hover{opacity:.9}

/* ---------- Bottom bar ---------- */
.lb-bottom{position:fixed;left:0;right:0;bottom:0;z-index:50}
.lb-bottom .row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:0;position:relative;z-index:50}
.lb-bottom .row.guest{grid-template-columns:1fr 1fr 1fr;gap:0;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.lb-bottom .cc{background:#e6e6e6;color:#1a1a1a;display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 8px;cursor:pointer;min-width:0;border:0;font-family:inherit}
.lb-bottom .cc .flag{font-size:20px;line-height:1;display:inline-flex;align-items:center}
.lb-bottom .cc .lbl{text-align:left;font-size:12px;font-weight:700;line-height:1.25;color:#1a1a1a;min-width:0}
.lb-bottom .cc .chev{flex-shrink:0}
.lb-bottom .signup{background:#ffffff;color:#1a1a1a;display:flex;align-items:center;justify-content:center;font-weight:700;padding:16px 8px;font-size:14px;min-width:0;transition:opacity .2s;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-bottom .signup:hover{opacity:.9}
.lb-bottom .login{background:#1c4e80;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;padding:16px 8px;font-size:14px;min-width:0;transition:opacity .2s;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-bottom .login:hover{opacity:.9}

/* Logged-in bottom bar */
.lb-logged{background:#111111;border-top:1px solid var(--lb-border)}
.lb-logged .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:28rem;margin:0 auto}
.lb-logged a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px;color:#fff;font-size:11px;font-weight:600;line-height:1;text-decoration:none;transition:opacity .2s;position:relative}
.lb-logged a:hover{opacity:.8}
.lb-logged a svg{width:24px;height:24px;color:var(--lb-primary)}
.lb-logged .badge{position:absolute;top:3px;right:calc(50% - 22px);background:#e11d48;color:#fff;font-size:10px;font-weight:900;border-radius:999px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;line-height:1;border:2px solid #111111;box-shadow:0 2px 6px rgba(225,29,72,.5)}

/* ---------- Drawer ---------- */
.lb-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.lb-drawer-bg.open{opacity:1;pointer-events:auto}
.lb-drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;background:#fff;z-index:61;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
.lb-drawer.open{transform:translateX(0)}
.lb-drawer .hd{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--lb-border)}
.lb-drawer .hd h3{margin:0;font-size:16px;font-weight:800}
.lb-drawer .grp{padding:12px}
.lb-drawer .grp .t{padding:0 8px 6px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--lb-muted);letter-spacing:.05em}
.lb-drawer .item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;color:#111827}
.lb-drawer .item:hover{background:#f3f4f6}
.lb-drawer .item .ic{width:32px;height:32px;display:grid;place-items:center;background:var(--lb-blue-circle);border-radius:999px;color:#fff;flex-shrink:0}
.lb-drawer .item .ic img{width:20px;height:20px;object-fit:contain}
.lb-drawer .item .ic.gold{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));box-shadow:var(--lb-shadow-gold)}
.lb-drawer .item .lbl{font-size:13px;font-weight:600}

/* ---------- Cache-busting utility ---------- */
.lb-skel{background:linear-gradient(90deg,#eaeef5,#f5f7fb,#eaeef5);background-size:200% 100%;animation:lb-sh 1.4s infinite}
@keyframes lb-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Page shell (sub-pages) ---------- */
.lb-page{max-width:28rem;margin:0 auto;padding:12px}
.lb-page h1{margin:0 0 12px;font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
.lb-page .back{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--lb-card);border:1px solid var(--lb-border);color:var(--lb-muted)}
.lb-card{background:var(--lb-card);border:1px solid var(--lb-border);border-radius:12px;padding:14px;box-shadow:var(--lb-shadow-card);margin-bottom:12px}
.lb-card h3{margin:0 0 8px;font-size:14px;font-weight:800}
.lb-field{margin-bottom:12px}
.lb-field label{display:block;font-size:12px;font-weight:700;color:var(--lb-fg);margin-bottom:6px}
.lb-field input,.lb-field select,.lb-field textarea{width:100%;border:1px solid var(--lb-border);background:#fff;border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--lb-fg);outline:none;transition:border-color .2s}
.lb-field input:focus,.lb-field select:focus,.lb-field textarea:focus{border-color:var(--lb-primary)}
.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;font-weight:800;font-size:14px;padding:12px 18px;border-radius:8px;box-shadow:var(--lb-shadow-gold);text-decoration:none;border:none;cursor:pointer;transition:transform .15s}
.lb-btn:hover{transform:translateY(-1px)}
.lb-btn.block{width:100%}
.lb-btn.ghost{background:transparent;color:var(--lb-primary);border:1px solid var(--lb-primary);box-shadow:none}
.lb-btn.danger{background:var(--lb-destructive);box-shadow:none}
.lb-alert{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
.lb-alert.ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.lb-alert.err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.lb-alert.info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}

/* ---------- Payment method grid ---------- */
.lb-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.lb-methods label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:2px solid var(--lb-border);border-radius:10px;background:#fff;cursor:pointer;transition:all .15s}
.lb-methods label:hover{border-color:var(--lb-primary-2)}
.lb-methods input{position:absolute;opacity:0;pointer-events:none}
.lb-methods input:checked + .m{border-color:transparent}
.lb-methods label:has(input:checked){border-color:var(--lb-primary);background:#eff4fd}
.lb-methods .logo{height:32px;display:grid;place-items:center}
.lb-methods .logo img{max-height:100%;max-width:100%;object-fit:contain}
.lb-methods .nm{font-size:11px;font-weight:700;text-align:center}
.lb-methods .fast{position:absolute;top:4px;right:4px;background:#f59e0b;color:#fff;font-size:8px;font-weight:900;padding:1px 5px;border-radius:999px;line-height:1.2}

/* ---------- Amount chips ---------- */
.lb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lb-chips button{border:1px solid var(--lb-border);background:#fff;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.lb-chips button:hover{border-color:var(--lb-primary);color:var(--lb-primary)}

/* ---------- Game list page ---------- */
.lb-search{position:relative;margin-bottom:10px}
.lb-search input{width:100%;background:#fff;border:1px solid var(--lb-border);border-radius:10px;padding:10px 34px;font-size:13px;outline:none}
.lb-search input:focus{border-color:var(--lb-primary)}
.lb-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--lb-muted)}
.lb-cchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px}
.lb-cchips a{flex-shrink:0;border:1px solid var(--lb-border);background:#fff;color:var(--lb-muted);padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.lb-cchips a.active{border-color:var(--lb-primary);color:var(--lb-primary);background:#eff4fd}

/* ---------- Promotions ---------- */
.lb-promos{display:grid;grid-template-columns:1fr;gap:12px}
.lb-promos .p{background:#fff;border:1px solid var(--lb-border);border-radius:12px;overflow:hidden;box-shadow:var(--lb-shadow-card)}
.lb-promos .p img{width:100%;height:auto;display:block}
.lb-promos .p .b{padding:12px}
.lb-promos .p h3{margin:0 0 4px;font-size:15px;font-weight:800}
.lb-promos .p p{margin:0;font-size:12px;color:var(--lb-muted)}

/* ---------- Games page: provider + game grids ---------- */
.lb-provgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:640px){.lb-provgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media(min-width:900px){.lb-provgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lb-provcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:#fff;border:1px solid var(--lb-border);border-radius:12px;text-decoration:none;color:inherit;box-shadow:var(--lb-shadow-card);transition:transform .15s,border-color .15s;min-width:0;overflow:hidden}
.lb-provcard:hover{transform:scale(1.03);border-color:var(--lb-primary)}
.lb-provcard .logo{height:48px;width:100%;display:grid;place-items:center;overflow:hidden}
.lb-provcard .logo img{max-height:48px;max-width:100%;object-fit:contain}
@media(min-width:640px){.lb-provcard{gap:8px;padding:12px 8px}.lb-provcard .logo{height:56px}.lb-provcard .logo img{max-height:56px}}
.lb-provcard .name{font-size:11px;font-weight:800;text-align:center;line-height:1.15;width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px;word-break:break-word}
.lb-provcard .cnt{font-size:10px;color:var(--lb-muted);font-weight:700}


/* Games grid — 1:1 with Lovable /games cards */
.lb-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.lb-games>*{min-width:0}
.lb-game{position:relative;background:var(--lb-card,#fff);border:1px solid rgba(226,232,240,.7);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px -6px rgba(37,99,235,.35);display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;font:inherit;color:inherit;text-decoration:none;width:100%;min-width:0;isolation:isolate}
.lb-game::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none;z-index:2}
.lb-game:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(37,99,235,.55)}
.lb-game:disabled{opacity:.7;cursor:wait}
.lb-game .thumb{position:relative;width:100%;aspect-ratio:1/1;background:#eef2f7;display:grid;place-items:center;overflow:hidden;border-radius:14px 14px 0 0}
.lb-game .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.lb-game:hover .thumb img{transform:scale(1.05)}
.lb-game .thumb .empty{display:grid;place-items:center;width:100%;height:100%;color:var(--lb-muted)}
.lb-game .overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 50%,transparent 100%);opacity:0;transition:opacity .2s;pointer-events:none}
.lb-game:hover .overlay{opacity:1}
.lb-game .playbtn{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,var(--lb-gold-1,#f7c948),var(--lb-gold-2,#f0a500));color:#3a2200;box-shadow:0 8px 22px rgba(240,165,0,.45),inset 0 1px 0 rgba(255,255,255,.5);transform:scale(.9);transition:transform .2s ease}
.lb-game:hover .playbtn{transform:scale(1)}
.lb-game .playbtn.spinner{background:transparent;color:#fff;box-shadow:none}
.lb-game .body{padding:10px;display:flex;flex-direction:column;flex:1;min-width:0}
.lb-game .title{font-size:14px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lb-fg,#0f2a66)}
.lb-game .prov{font-size:12px;color:var(--lb-muted);font-weight:500;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Homepage hot games: always compact 4 per row on mobile */
#lb-hot .lb-games{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:start}
#lb-hot .lb-game-form{min-width:0;width:100%}
#lb-hot .lb-game{display:flex;flex-direction:column;border-radius:10px;border:0;min-width:0;aspect-ratio:auto;box-shadow:0 1px 2px rgba(15,23,42,.06)}
#lb-hot .lb-game>.thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden}
#lb-hot .lb-game>.thumb>img{position:absolute;inset:8%;margin:auto;width:auto;height:auto;max-width:84%;max-height:84%}
#lb-hot .lb-game>.thumb>img.bg{display:none}
#lb-hot .lb-game>.thumb>img.fg{object-fit:contain;object-position:center}
#lb-hot .lb-game .lbl{position:static;display:flex;align-items:center;justify-content:center;height:26px;padding:0 4px 2px;background:none;font-size:11.5px;font-weight:500;line-height:1.2;color:#374151;text-align:center}
#lb-hot .lb-game .lbl p,#lb-hot .lb-game .lbl .t{margin:0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lb-hot .lb-game .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--lb-muted)}
#lb-hot .lb-game .overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.4);opacity:0;transition:opacity .2s;pointer-events:none}
#lb-hot .lb-game:hover .overlay{opacity:1}
#lb-hot .lb-game .playbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:9999px;transform:none;background:linear-gradient(135deg,var(--lb-gold-1,#f7c948),var(--lb-gold-2,#f0a500));color:#3a2200;box-shadow:0 8px 22px rgba(240,165,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
#lb-hot .lb-game:hover .playbtn{transform:none}
#lb-hot.lb-sec{padding:8px 12px 16px}
#lb-hot .h{margin-bottom:8px}



/* Pagination */
.lb-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.lb-pager a,.lb-pager button,.lb-pager span.gap{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--lb-border);background:#fff;color:var(--lb-fg);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.lb-pager a:hover{border-color:var(--lb-primary);color:var(--lb-primary)}
.lb-pager .cur{background:linear-gradient(135deg,var(--lb-gold-1,#f7c948),var(--lb-gold-2,#f0a500));color:#3a2200;border-color:transparent;box-shadow:var(--lb-shadow-gold,0 4px 14px rgba(240,165,0,.35))}
.lb-pager .nav.dis{opacity:.4;pointer-events:none}
.lb-pager span.gap{border:0;background:transparent;color:var(--lb-muted);min-width:auto;padding:0 4px}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lb-spin{display:inline-block;width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:lb-spin .8s linear infinite}


/* ---------- Account: wallet + stats ---------- */
.lb-wallet{background:linear-gradient(135deg,var(--lb-primary),var(--lb-primary-2));color:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:var(--lb-shadow-card)}
.lb-wallet .toggle{display:flex;background:rgba(255,255,255,.15);border-radius:999px;padding:3px;margin-bottom:12px;gap:2px}
.lb-wallet .toggle button{flex:1;background:transparent;border:0;color:#fff;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer;opacity:.7}
.lb-wallet .toggle button.active{background:#fff;color:var(--lb-primary);opacity:1}
.lb-wallet .lbl{font-size:11px;opacity:.85;font-weight:600}
.lb-wallet .amt{font-size:28px;font-weight:900;margin:4px 0 10px}
.lb-wallet .row{display:flex;gap:8px;flex-wrap:wrap}
.lb-wallet .row a{flex:1;min-width:0;text-align:center;background:rgba(255,255,255,.18);color:#fff;padding:8px 6px;border-radius:8px;font-size:12px;font-weight:800;text-decoration:none}
.lb-wallet .row a:hover{background:rgba(255,255,255,.28)}
.lb-wallet .row a.gold{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));box-shadow:var(--lb-shadow-gold)}

.lb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.lb-stat{background:#fff;border:1px solid var(--lb-border);border-radius:10px;padding:10px 8px;text-align:center;box-shadow:var(--lb-shadow-card)}
.lb-stat .n{font-size:14px;font-weight:900;color:var(--lb-primary)}
.lb-stat .l{font-size:10px;color:var(--lb-muted);font-weight:600;margin-top:2px}

.lb-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.lb-menu a{background:#fff;border:1px solid var(--lb-border);border-radius:10px;padding:10px 6px;text-align:center;text-decoration:none;color:var(--lb-fg);box-shadow:var(--lb-shadow-card);font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.lb-menu a .ico{font-size:20px}
.lb-menu a:hover{border-color:var(--lb-primary);color:var(--lb-primary)}
.lb-menu .dot{position:absolute;top:4px;right:6px;background:var(--lb-destructive);color:#fff;font-size:9px;font-weight:900;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;line-height:1}

/* ---------- Tables (mobile-friendly) ---------- */
.lb-tbl{width:100%;border-collapse:collapse;font-size:12px}
.lb-tbl thead th{background:#f8fafc;text-align:left;padding:8px 10px;font-weight:800;font-size:11px;color:var(--lb-muted);border-bottom:1px solid var(--lb-border)}
.lb-tbl td{padding:8px 10px;border-bottom:1px solid var(--lb-border);vertical-align:top}
.lb-tbl tr:last-child td{border-bottom:0}
.lb-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:capitalize}
.lb-pill.pending{background:#fef3c7;color:#92400e}
.lb-pill.approved,.lb-pill.win{background:#dcfce7;color:#166534}
.lb-pill.rejected,.lb-pill.loss{background:#fee2e2;color:#991b1b}
.lb-tblwrap{background:#fff;border:1px solid var(--lb-border);border-radius:12px;overflow-x:auto;box-shadow:var(--lb-shadow-card);margin-bottom:12px}

/* ---------- Bonus hero + VIP + Inbox ---------- */
.lb-bhero{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;border-radius:14px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;box-shadow:var(--lb-shadow-gold)}
.lb-bhero .a{font-size:26px;font-weight:900;line-height:1}
.lb-bhero .l{font-size:11px;opacity:.9}

.lb-vip{text-align:center;padding:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border-radius:14px;margin-bottom:12px}
.lb-vip .lvl{font-size:36px;font-weight:900;color:var(--lb-gold-2);letter-spacing:2px;line-height:1}
.lb-vip .bar{background:rgba(255,255,255,.15);border-radius:8px;height:8px;overflow:hidden;margin:14px 0 8px}
.lb-vip .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--lb-gold-1),var(--lb-gold-2))}

.lb-msgs{display:flex;flex-direction:column;gap:8px}
.lb-msg{background:#fff;border:1px solid var(--lb-border);border-left:3px solid var(--lb-border);border-radius:8px;padding:10px 12px;box-shadow:var(--lb-shadow-card)}
.lb-msg.unread{border-left-color:var(--lb-destructive);background:#fef7f7}
.lb-msg h4{margin:0 0 4px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px}
.lb-msg p{margin:0 0 6px;font-size:12px;color:var(--lb-muted);white-space:pre-wrap}
.lb-msg time{font-size:10px;color:var(--lb-muted)}

/* Phase 2 additions: more-btn, country modal, drawer language */
.lb-more-btn{background:#fff;border:1px solid var(--lb-border);border-radius:9999px;padding:6px 16px;font-size:12px;font-weight:800;color:var(--lb-fg);cursor:pointer}
.lb-more-btn:hover{border-color:var(--lb-primary);color:var(--lb-primary)}

.lb-cc-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center}
.lb-cc-modal.open{display:flex}
.lb-cc-modal .sheet{width:100%;max-width:28rem;max-height:70vh;background:#fff;border-radius:14px 14px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:lb-up .2s ease}
@keyframes lb-up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.lb-cc-modal .hd{padding:12px 14px;border-bottom:1px solid var(--lb-border);background:#fff}
.lb-cc-modal .hd .t{font-size:14px;font-weight:800;color:var(--lb-fg);margin-bottom:8px}
.lb-cc-modal .search{display:flex;align-items:center;gap:8px;border:1px solid var(--lb-border);border-radius:8px;padding:8px 10px;background:#f7f8fb}
.lb-cc-modal .search input{border:0;background:transparent;flex:1;font-size:13px;outline:none;color:var(--lb-fg)}
.lb-cc-modal ul{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.lb-cc-modal li button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;background:transparent;border:0;text-align:left;cursor:pointer;color:var(--lb-fg)}
.lb-cc-modal li button:hover{background:#f2f4f8}
.lb-cc-modal .fl{font-size:20px;line-height:1}
.lb-cc-modal .nm{flex:1;font-size:13px;font-weight:600}
.lb-cc-modal .cx{font-size:11px;color:var(--lb-muted);font-weight:700}
.lb-cc-modal .chk{color:var(--lb-primary);font-weight:900}

.lb-drawer .lang-wrap{margin:2px 0}
.lb-drawer .lang-wrap .cv{margin-left:auto;transition:transform .18s}
.lb-drawer .lang-wrap.open .cv{transform:rotate(180deg)}
.lb-drawer .lang-opts{display:none;padding:4px 8px 4px 46px;gap:6px}
.lb-drawer .lang-wrap.open .lang-opts{display:flex}
.lb-drawer .lang-opts .lo{flex:1;text-align:center;padding:6px 8px;border-radius:6px;font-size:12px;font-weight:800;background:#f2f4f8;color:#333;text-decoration:none}
.lb-drawer .lang-opts .lo.on{background:#1e50a2;color:#fff}

/* Phase 5: Account suite polish */
.lb-phero{background:linear-gradient(135deg,#1e50a2,#3b82f6);color:#fff;border-radius:14px;padding:14px;margin-bottom:12px;display:flex;align-items:center;gap:12px;box-shadow:var(--lb-shadow-card)}
.lb-phero .av{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px;font-weight:900;flex-shrink:0}
.lb-phero .nm{font-size:15px;font-weight:900;line-height:1.2}
.lb-phero .sub{font-size:11px;opacity:.85;margin-top:2px}
.lb-phero .vipbadge{margin-left:auto;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#1a1a2e;font-weight:900;font-size:11px;padding:5px 10px;border-radius:999px;text-decoration:none;box-shadow:var(--lb-shadow-gold);white-space:nowrap}

.lb-tabs{display:flex;background:#fff;border:1px solid var(--lb-border);border-radius:10px;padding:3px;gap:2px;margin-bottom:10px;box-shadow:var(--lb-shadow-card)}
.lb-tabs a{flex:1;text-align:center;padding:8px 6px;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--lb-muted)}
.lb-tabs a.on{background:linear-gradient(135deg,var(--lb-primary),var(--lb-primary-2));color:#fff;box-shadow:0 2px 6px rgba(30,80,162,.25)}

.lb-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.lb-benefits .b{background:#fff;border:1px solid var(--lb-border);border-radius:10px;padding:10px;box-shadow:var(--lb-shadow-card);display:flex;gap:8px;align-items:center}
.lb-benefits .b .ic{font-size:20px}
.lb-benefits .b .t{font-size:11px;color:var(--lb-muted);font-weight:600}
.lb-benefits .b .v{font-size:13px;font-weight:900;color:var(--lb-primary)}

.lb-tobar{background:#fff;border:2px solid rgba(30,80,162,.25);border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:var(--lb-shadow-card)}
.lb-tobar .hd{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--lb-muted);margin-bottom:4px}
.lb-tobar .amt{font-size:20px;font-weight:900;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.lb-tobar .track{position:relative;height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.lb-tobar .track>i{display:block;height:100%;background:linear-gradient(90deg,var(--lb-gold-1),var(--lb-gold-2));transition:width .4s}
.lb-tobar .rem{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border-radius:8px;padding:6px 10px;margin-top:8px;font-size:11px;font-weight:700;color:var(--lb-muted)}
.lb-tobar .rem b{color:var(--lb-primary);font-size:13px}

.lb-promo-hero{background:linear-gradient(135deg,#1e50a2,#3b82f6);color:#fff;border-radius:14px;padding:18px 16px;margin-bottom:14px;text-align:center;box-shadow:var(--lb-shadow-card)}
.lb-promo-hero h2{margin:0 0 4px;font-size:20px;font-weight:900}
.lb-promo-hero p{margin:0;font-size:12px;opacity:.9}

/* Phase 6: Funds (deposit/withdraw) */
.lb-funds{max-width:520px;margin:0 auto;padding-bottom:24px}
.lb-funds .fh{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;padding:12px 14px;border-bottom:1px solid var(--lb-border);box-shadow:var(--lb-shadow-card)}
.lb-funds .fh h1{margin:0;font-size:15px;font-weight:800;color:var(--lb-fg)}
.lb-funds .fh .x{color:var(--lb-muted);text-decoration:none;font-size:20px;font-weight:700;line-height:1;padding:2px 6px;border-radius:6px}
.lb-funds .fh .x:hover{color:var(--lb-fg);background:#e2e8f0}
.lb-funds .ftabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f1f5f9;padding:10px 12px}
.lb-funds .ftabs a{text-align:center;padding:10px;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;background:#fff;color:var(--lb-muted);box-shadow:var(--lb-shadow-card)}
.lb-funds .ftabs a.on{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#1a1a2e;box-shadow:var(--lb-shadow-gold)}
.lb-funds .fbody{padding:12px}
.lb-funds .fbal{background:linear-gradient(135deg,#eff4fd,#fff);border:1px solid var(--lb-border);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;box-shadow:var(--lb-shadow-card)}
.lb-funds .fbal .l{font-size:12px;color:var(--lb-muted);font-weight:600}
.lb-funds .fbal .a{font-size:22px;font-weight:900;color:var(--lb-primary)}
.lb-funds .fpromo{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));border-radius:10px;margin-bottom:10px;box-shadow:var(--lb-shadow-gold);overflow:hidden}
.lb-funds .fpromo summary{display:flex;align-items:center;gap:8px;padding:12px;cursor:pointer;color:#1a1a2e;font-size:13px;list-style:none}
.lb-funds .fpromo summary::-webkit-details-marker{display:none}
.lb-funds .fpromo .ic{font-size:18px}
.lb-funds .fpromo .lb{font-weight:800;white-space:nowrap}
.lb-funds .fpromo .cur{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-funds .fpromo .cv{font-weight:800}
.lb-funds .fpromo[open] .cv{transform:rotate(180deg)}
.lb-funds .fpromo .opts{background:#fff;max-height:280px;overflow:auto}
.lb-funds .fpromo .opts label{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--lb-border);cursor:pointer;font-size:13px}
.lb-funds .fpromo .opts label:hover{background:#f8fafc}
.lb-funds .fpromo .opts label input{accent-color:var(--lb-primary)}
.lb-funds .fcard{background:#fff;border:1px solid var(--lb-border);border-radius:12px;padding:12px;box-shadow:var(--lb-shadow-card)}
.lb-funds .fttl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:10px}
.lb-funds .fttl .bar{width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--lb-gold-1),var(--lb-gold-2))}
.lb-funds .fmeth{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lb-funds .fmeth .mb{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;border:1.5px solid var(--lb-border);background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);border-radius:14px;padding:10px 8px 12px;cursor:pointer;transition:transform .15s ease,border-color .15s,box-shadow .15s;overflow:hidden;min-height:104px}
.lb-funds .fmeth .mb:hover{border-color:var(--lb-primary);box-shadow:0 4px 14px -6px rgba(30,80,162,.35);transform:translateY(-1px)}
.lb-funds .fmeth .mb input{position:absolute;opacity:0;pointer-events:none}
.lb-funds .fmeth .mb .fast{position:absolute;top:6px;right:6px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:8px;font-weight:900;padding:2px 6px;border-radius:6px;line-height:1.3;z-index:2;box-shadow:0 2px 6px rgba(16,185,129,.4)}
.lb-funds .fmeth .mb .logo{width:100%;height:48px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.lb-funds .fmeth .mb .logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.lb-funds .fmeth .mb .logo b{font-size:12px;font-weight:800;color:var(--lb-fg);text-align:center;line-height:1.2}
.lb-funds .fmeth .mb .nm{font-size:11px;font-weight:700;color:var(--lb-fg);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding:0 2px}
.lb-funds .fmeth .mb .chk{position:absolute;top:6px;left:6px;color:#fff;background:var(--lb-primary);width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:10px;opacity:0;transition:.15s;z-index:2}
.lb-funds .fmeth .mb:has(input:checked){border-color:var(--lb-primary);background:linear-gradient(180deg,#eef4ff 0%,#e0ecff 100%);box-shadow:0 4px 12px -4px rgba(30,80,162,.35)}
.lb-funds .fmeth .mb:has(input:checked) .chk{opacity:1}
.lb-funds .fam{display:flex;align-items:center;gap:8px;border:1px solid var(--lb-border);background:#f8fafc;border-radius:10px;padding:10px 12px}
.lb-funds .fam:focus-within{border-color:var(--lb-primary)}
.lb-funds .fam>span{color:var(--lb-primary);font-size:15px;font-weight:900}
.lb-funds .fam input{flex:1;background:transparent;border:0;outline:none;font-size:14px;color:var(--lb-fg)}
.lb-funds .fchips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.lb-funds .fchips button{border:1px solid var(--lb-border);background:#f8fafc;border-radius:8px;padding:8px;font-size:12px;font-weight:800;color:var(--lb-fg);cursor:pointer;transition:.15s}
.lb-funds .fchips button:hover{border-color:var(--lb-primary);color:var(--lb-primary)}
.lb-funds .facc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lb-funds .facc-chips button{border:1px solid var(--lb-border);background:linear-gradient(180deg,#fff,#f4f7fb);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--lb-fg);cursor:pointer;transition:.15s}
.lb-funds .facc-chips button:hover{border-color:var(--lb-primary);color:var(--lb-primary);box-shadow:0 2px 8px -3px rgba(30,80,162,.35)}
.lb-funds .fsubmit{width:100%;margin-top:14px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#1a1a2e;font-size:15px;font-weight:900;padding:12px;border:0;border-radius:10px;cursor:pointer;box-shadow:var(--lb-shadow-gold);transition:transform .1s}
.lb-funds .fsubmit:hover{transform:scale(1.01)}
.lb-funds .fsubmit:active{transform:scale(.99)}
.lb-funds .fsubmit:disabled{opacity:.55;cursor:not-allowed}

/* ==========================================================================
   React parity: sections, gradient icon circles, wallet-dual with switch,
   logged-in bottom bar, sticky sub-header — mirrors src/routes designs.
   ========================================================================== */
.rp-page{background:var(--lb-bg);padding-bottom:16px}
.rp-header{position:sticky;top:0;z-index:40;background:var(--lb-header);color:var(--lb-header-fg)}
.rp-header .in{display:flex;align-items:center;gap:12px;height:48px;padding:0 12px;max-width:28rem;margin:0 auto}
.rp-header .back{display:grid;place-items:center;width:28px;height:28px;color:rgba(255,255,255,.9);text-decoration:none}
.rp-header .ttl{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.rp-header .ttl svg{width:20px;height:20px}
.rp-header .close{margin-left:auto;color:rgba(255,255,255,.9)}

.rp-card{background:var(--lb-card);border-radius:12px;padding:12px;box-shadow:var(--lb-shadow-card);margin:10px 12px}
.rp-section{background:var(--lb-card);border-radius:12px;padding:12px;box-shadow:var(--lb-shadow-card);margin:0 12px 10px}
.rp-section .hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rp-section .hd .bar{width:4px;height:16px;border-radius:999px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2))}
.rp-section .hd h2{margin:0;font-size:13px;font-weight:800;color:var(--lb-fg)}
.rp-grid{display:grid;gap:16px 8px}
.rp-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:inherit;background:transparent;border:0;padding:0;transition:opacity .15s}
.rp-item:hover{opacity:.8}
.rp-item .rp-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;box-shadow:var(--lb-shadow-gold);font-size:20px}
.rp-item .rp-ic svg{width:20px;height:20px}
.rp-item .rp-ic img{border-radius:50%}
.rp-item .rp-lbl{font-size:11px;font-weight:500;color:var(--lb-fg);line-height:1.2}
.rp-item .rp-badge{position:absolute;top:-7px;right:-9px;z-index:5;background:#e11d48;color:#fff;font-size:11px;font-weight:900;padding:0 5px;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;line-height:1;border:2px solid #fff;box-shadow:0 2px 6px rgba(225,29,72,.45);animation:rp-badge-pulse 1.8s ease-in-out infinite}
@keyframes rp-badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Account header with user avatar + close */
.rp-uhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:var(--lb-card);padding:16px;box-shadow:var(--lb-shadow-card)}
.rp-uhead .u{display:flex;align-items:center;gap:12px;min-width:0}
.rp-uhead .av{width:56px;height:56px;border-radius:9999px;background:var(--lb-secondary,#eef1f6);color:var(--lb-muted-foreground,#68758a);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.rp-uhead .av img{width:100%;height:100%;object-fit:cover;display:block}
.rp-uhead .av svg{width:32px;height:32px;stroke:currentColor}
.rp-uhead .nm{font-size:15px;font-weight:800;text-transform:uppercase;color:var(--lb-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-uhead .sub{font-size:11px;color:var(--lb-muted);margin-top:2px}
.rp-uhead .sub b{color:var(--lb-primary);font-weight:700}

/* Dual wallet with center switch */
.rp-wallet2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:var(--lb-card);border-radius:12px;padding:12px;box-shadow:var(--lb-shadow-card);margin:10px 12px}
.rp-wallet2 .col{min-width:0}
.rp-wallet2 .lb{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--lb-muted)}
.rp-wallet2 .col.right .lb{justify-content:flex-end}
.rp-wallet2 .val{display:flex;align-items:center;gap:6px;margin-top:4px}
.rp-wallet2 .col.right .val{justify-content:flex-end}
.rp-wallet2 .dot{width:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.15);flex-shrink:0}
.rp-wallet2 .dot.on{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.6)}
.rp-wallet2 .amt{font-size:18px;font-weight:900;color:rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-wallet2 .amt.on{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rp-wallet2 .sw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px}
.rp-wallet2 .sw button{position:relative;width:44px;height:20px;border-radius:999px;background:rgba(16,185,129,.2);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);border:1px solid rgba(16,185,129,.6);cursor:pointer;padding:0;transition:.25s}
.rp-wallet2 .sw button .nub{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:999px;background:#10b981;box-shadow:0 1px 5px rgba(16,185,129,.55);transition:.25s}
.rp-wallet2 .sw button.on .nub{left:calc(100% - 17px)}
.rp-wallet2 .sw .txt{font-size:9px;font-weight:700;color:var(--lb-muted)}

/* Logged-in bottom bar */
.rp-lgb{position:fixed;inset-inline:0;bottom:0;z-index:50;background:#111827;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.rp-lgb .nav{display:grid;grid-template-columns:repeat(4,1fr);max-width:28rem;margin:0 auto}
.rp-lgb .nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;color:#fff;text-decoration:none;font-size:11px;font-weight:700}
.rp-lgb .nav a svg{width:22px;height:22px;color:var(--lb-primary-2)}
.rp-lgb .nav a.on svg{color:#fff}

/* Promo list */
.rp-promos{max-width:28rem;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.rp-promo{overflow:hidden;border-radius:12px;border:1px solid var(--lb-border);box-shadow:var(--lb-shadow-card);background:var(--lb-card)}
.rp-promo img{width:100%;object-fit:cover;display:block}
.rp-promo .body{padding:12px}
.rp-promo .body h3{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--lb-fg)}
.rp-promo .body p{margin:0;font-size:12px;color:var(--lb-muted);line-height:1.4}
.rp-empty{margin:64px auto;max-width:280px;text-align:center;color:var(--lb-muted)}
.rp-empty .ic{margin:0 auto 10px;width:56px;height:56px;border-radius:14px;background:var(--lb-muted);color:var(--lb-primary);display:grid;place-items:center}
.rp-empty .ic svg{width:28px;height:28px}
.rp-empty h3{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--lb-fg)}
.rp-empty p{margin:0;font-size:12.5px}

/* Bonus wallet offers */
.rp-boff{background:var(--lb-card);border-radius:12px;padding:14px;box-shadow:var(--lb-shadow-card);display:flex;align-items:flex-start;gap:10px}
.rp-boff .ic{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--lb-shadow-gold)}
.rp-boff .ic svg{width:16px;height:16px}
.rp-boff .body{flex:1;min-width:0}
.rp-boff .body .t{font-weight:800;color:var(--lb-fg)}
.rp-boff .body .amt{margin-top:2px;font-size:18px;font-weight:900;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rp-boff .body .meta{margin-top:4px;font-size:11px;color:var(--lb-muted)}
.rp-boff .body .tag{display:inline-flex;align-items:center;gap:4px;background:rgba(16,185,129,.15);color:#10b981;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px}
.rp-boff .cta{flex-shrink:0;border:0;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;font-weight:800;font-size:12px;padding:8px 14px;border-radius:8px;box-shadow:var(--lb-shadow-gold);cursor:pointer}
.rp-boff .claimed{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;background:rgba(16,185,129,.12);color:#10b981;font-size:11px;font-weight:800;padding:6px 10px;border-radius:8px}

/* ========= Phase 3: account sub-pages (personal-info / password / etc) ========= */
.acc-page{padding-bottom:16px;background:var(--lb-bg)}
.acc-subhead{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;background:var(--lb-card);border-bottom:1px solid var(--lb-border);padding:14px 16px;box-shadow:var(--lb-shadow-card)}
.acc-subhead .back{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;color:var(--lb-muted);text-decoration:none;transition:color .15s}
.acc-subhead .back:hover{color:var(--lb-primary)}
.acc-subhead h1{margin:0;font-size:15px;font-weight:800;color:var(--lb-fg);letter-spacing:.01em}

.acc-hero{margin:12px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#0a3838,#0d4a4a);color:#eafaf7;padding:16px;box-shadow:var(--lb-shadow-card)}
.acc-hero .hero-in{display:flex;align-items:center;gap:14px}
.acc-hero .ava{width:60px;height:60px;border-radius:999px;background:rgba(63,176,163,.2);display:grid;place-items:center;color:#3fb0a3;border:2px solid rgba(63,176,163,.3)}
.acc-hero .info{min-width:0;flex:1}
.acc-hero .uname{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;letter-spacing:.02em}
.acc-hero .cp{border:0;background:transparent;color:#3fb0a3;cursor:pointer;padding:2px;display:inline-grid;place-items:center;border-radius:4px}
.acc-hero .cp:hover{background:rgba(63,176,163,.15)}
.acc-hero .vip{margin-top:6px;display:flex;align-items:center;gap:8px}
.acc-hero .vlvl{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#111;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px}
.acc-hero .vbar{flex:1;height:5px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden}
.acc-hero .vbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lb-gold-1),var(--lb-gold-2));border-radius:999px;transition:width .4s}

.acc-card{margin:8px 12px;background:var(--lb-card);border-radius:14px;padding:14px;box-shadow:var(--lb-shadow-card);border:1px solid var(--lb-border)}
.acc-card .row{display:flex;gap:12px;align-items:flex-start}
.acc-card .ic{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(30,80,162,.08);color:var(--lb-primary);display:grid;place-items:center}
.acc-card .body{flex:1;min-width:0}
.acc-card .lbl{font-size:11px;font-weight:700;color:var(--lb-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.acc-card .val{font-size:14px;font-weight:700;color:var(--lb-fg);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acc-card .lock{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--lb-muted);font-weight:600;padding:2px 6px;background:rgba(0,0,0,.05);border-radius:4px}
.acc-card .ok-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#10b981;font-weight:700;padding:2px 6px;background:rgba(16,185,129,.12);border-radius:4px}
.acc-card .hint{font-size:10px;color:var(--lb-muted);margin-top:4px;font-weight:600}
.acc-card .inline-form{display:flex;gap:6px;margin-top:2px}
.acc-card .inline-form input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--lb-border);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--lb-fg)}
.acc-card .inline-form input:focus{outline:none;border-color:var(--lb-primary);box-shadow:0 0 0 3px rgba(30,80,162,.1)}
.acc-card .inline-form button{background:linear-gradient(135deg,var(--lb-primary),var(--lb-primary-2));color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.acc-card .inline-form button:hover{filter:brightness(1.05)}
.acc-card .del{border:0;background:transparent;color:#dc2626;cursor:pointer;padding:6px;border-radius:6px;display:inline-grid;place-items:center}
.acc-card .del:hover{background:rgba(220,38,38,.1)}

.acc-form{margin:8px 12px;display:flex;flex-direction:column;gap:10px}
.acc-field{background:var(--lb-card);border-radius:12px;padding:14px;box-shadow:var(--lb-shadow-card);border:1px solid var(--lb-border)}
.acc-field label{display:block;font-size:12px;font-weight:700;color:var(--lb-fg);margin-bottom:8px}
.acc-input{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--lb-border);border-radius:10px;background:rgba(0,0,0,.02);transition:border-color .15s}
.acc-input:focus-within{border-color:var(--lb-primary);background:#fff}
.acc-input svg{color:var(--lb-muted);flex-shrink:0}
.acc-input input{flex:1;border:0;background:transparent;font-size:14px;font-family:inherit;color:var(--lb-fg);outline:none;min-width:0}
.acc-input .eye{border:0;background:transparent;color:var(--lb-muted);cursor:pointer;padding:2px;display:inline-grid;place-items:center}
.acc-input .eye:hover{color:var(--lb-primary)}

.acc-btn{display:block;width:100%;padding:14px 20px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:var(--lb-shadow-gold);text-decoration:none;transition:transform .12s}
.acc-btn:hover{transform:scale(1.01)}
.acc-btn:active{transform:scale(.99)}

.acc-alert{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700}
.acc-alert.err{background:rgba(220,38,38,.1);color:#dc2626;border:1px solid rgba(220,38,38,.2)}
.acc-alert.ok{background:rgba(30,80,162,.08);color:var(--lb-primary);border:1px solid rgba(30,80,162,.15)}

/* ============ Turnover page (React parity) ============ */
.lb-turn{max-width:520px;margin:0 auto;padding-bottom:24px}
.lb-turn .th{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;padding:12px 14px;border-bottom:1px solid var(--lb-border);box-shadow:var(--lb-shadow-card)}
.lb-turn .th h1{margin:0;font-size:15px;font-weight:800;color:var(--lb-fg)}
.lb-turn .th .x{color:var(--lb-muted);text-decoration:none;font-size:20px;font-weight:700;padding:2px 6px;border-radius:6px}
.lb-turn .wtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#fff;border:1px solid var(--lb-border);border-radius:12px;padding:4px;margin:12px 12px 0;box-shadow:var(--lb-shadow-card)}
.lb-turn .wtabs a{text-align:center;padding:8px;border-radius:8px;font-size:12px;font-weight:800;text-decoration:none;color:var(--lb-muted)}
.lb-turn .wtabs a.on{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#1a1a2e;box-shadow:var(--lb-shadow-gold)}
.lb-turn .bsum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#fff;border:1px solid var(--lb-border);border-radius:12px;padding:12px;margin:12px;box-shadow:var(--lb-shadow-card);text-align:center}
.lb-turn .bsum span{display:block;font-size:10px;color:var(--lb-muted);margin-bottom:2px}
.lb-turn .bsum b{font-size:13px;font-weight:900}
.lb-turn .bsum b.p{color:var(--lb-primary)}
.lb-turn .bsum b.g{color:#10b981}
.lb-turn .bsum b.r{color:var(--lb-destructive)}
.lb-turn .ttabs{display:grid;grid-template-columns:1fr 1fr;background:#f1f5f9;margin-top:12px;box-shadow:var(--lb-shadow-card)}
.lb-turn .ttabs a{position:relative;text-align:center;padding:12px;font-size:13px;font-weight:800;text-decoration:none;color:var(--lb-muted)}
.lb-turn .ttabs a.on{color:var(--lb-primary)}
.lb-turn .ttabs a.on::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:4px;border-radius:999px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2))}
.lb-turn .tlist{padding:12px;display:flex;flex-direction:column;gap:12px}
.lb-turn .empty{padding:60px 0;text-align:center;color:var(--lb-muted)}
.lb-turn .empty .ic{font-size:44px;opacity:.4}
.lb-turn .tk{display:flex;align-items:stretch;background:#fff;border:2px solid rgba(30,80,162,.22);border-radius:14px;overflow:hidden;box-shadow:var(--lb-shadow-card)}
.lb-turn .tk-body{flex:1;min-width:0;padding:14px}
.lb-turn .tk-hd{display:flex;align-items:flex-start;gap:8px}
.lb-turn .tk-hd .bar{width:4px;height:16px;border-radius:2px;background:var(--lb-primary);margin-top:2px}
.lb-turn .tk-hd .lb{font-size:13px;font-weight:800;color:var(--lb-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-turn .tk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--lb-muted)}
.lb-turn .tk-meta .tag{border:1px solid rgba(30,80,162,.4);color:var(--lb-primary);padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700}
.lb-turn .tk-amt{margin:8px 0 0;font-size:22px;font-weight:900;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lb-turn .tk-bar{position:relative;margin-top:8px;height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.lb-turn .tk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lb-gold-1),var(--lb-gold-2));transition:width .4s}
.lb-turn .tk-nums{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;font-weight:700;color:var(--lb-muted)}
.lb-turn .tk-rem{display:flex;justify-content:space-between;align-items:center;margin-top:8px;background:#f1f5f9;border-radius:8px;padding:6px 10px}
.lb-turn .tk-rem span{font-size:11px;color:var(--lb-muted);font-weight:700}
.lb-turn .tk-rem b{font-size:14px;font-weight:900;color:var(--lb-primary)}
.lb-turn .tk-sep{position:relative;display:flex;align-items:center;width:12px}
.lb-turn .tk-sep .d1,.lb-turn .tk-sep .d2{position:absolute;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--lb-bg,#f1f5f9)}
.lb-turn .tk-sep .d1{top:-6px}
.lb-turn .tk-sep .d2{bottom:-6px}
.lb-turn .tk-sep .line{width:100%;border-left:2px dashed rgba(30,80,162,.28);height:100%}
.lb-turn .tk-side{width:92px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;text-align:center}
.lb-turn .tk-side .ic{width:34px;height:34px;border-radius:50%;background:rgba(30,80,162,.1);color:var(--lb-primary);display:grid;place-items:center;font-size:18px;font-weight:900}
.lb-turn .tk-side .pct{margin:0;font-size:15px;font-weight:900;color:var(--lb-primary)}
.lb-turn .tk-side .st{margin:0;font-size:10px;color:var(--lb-muted);font-weight:700}
.lb-turn .tk-side .ok{width:34px;height:34px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}
.lb-turn .tk-side .ok-t{margin:0;font-size:11px;font-weight:800;color:#10b981;line-height:1.2}

/* Bet records list */
.lb-hist{max-width:520px;margin:0 auto;padding-bottom:96px}
.lb-hist .hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;background:var(--lb-card);border-bottom:1px solid var(--lb-border);padding:14px 16px;box-shadow:var(--lb-shadow-card)}
.lb-hist .hdr .back{color:var(--lb-muted);font-size:20px;text-decoration:none;line-height:1}
.lb-hist .hdr h1{margin:0;font-size:15px;font-weight:800}
.lb-hist .hdr.close{background:#f8fafc;justify-content:space-between}
.lb-hist .hdr.close .x{color:var(--lb-muted);text-decoration:none;font-size:20px;font-weight:700}
.lb-hist .ftabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px}
.lb-hist .ftabs a{text-align:center;padding:10px;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;background:var(--lb-card);color:var(--lb-muted);box-shadow:var(--lb-shadow-card)}
.lb-hist .ftabs a.on{background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;box-shadow:var(--lb-shadow-gold)}
.lb-hist .list{margin:0 12px;display:flex;flex-direction:column;gap:10px}
.lb-hist .row{display:flex;align-items:center;justify-content:space-between;background:var(--lb-card);border-radius:12px;padding:12px;box-shadow:var(--lb-shadow-card)}
.lb-hist .row .lft{display:flex;align-items:center;gap:12px;min-width:0}
.lb-hist .row .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:900;flex-shrink:0}
.lb-hist .row .ic.win{background:rgba(43,79,168,.14);color:var(--lb-primary)}
.lb-hist .row .ic.lose{background:rgba(220,38,38,.1);color:var(--lb-destructive)}
.lb-hist .row .ic.dep{background:rgba(16,185,129,.1);color:#10b981}
.lb-hist .row .ic.wd{background:rgba(14,165,233,.1);color:#0ea5e9}
.lb-hist .row .ttl{margin:0;font-size:13px;font-weight:800;color:var(--lb-fg)}
.lb-hist .row .sub{margin:2px 0 0;font-size:11px;color:var(--lb-muted)}
.lb-hist .row .rgt{text-align:right;flex-shrink:0}
.lb-hist .row .amt{margin:0;font-size:14px;font-weight:900}
.lb-hist .row .amt.pos{color:var(--lb-primary)}
.lb-hist .row .amt.neg{color:var(--lb-destructive)}
.lb-hist .row .st{margin:2px 0 0;font-size:10px;font-weight:700;color:var(--lb-muted)}
.lb-hist .row .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;margin-left:6px}
.lb-hist .row .chip.pending{background:rgba(245,158,11,.12);color:#f59e0b}
.lb-hist .row .chip.approved{background:rgba(16,185,129,.12);color:#10b981}
.lb-hist .row .chip.rejected{background:rgba(220,38,38,.12);color:var(--lb-destructive)}
.lb-hist .empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:80px 20px;text-align:center;color:var(--lb-muted)}
.lb-hist .empty .em{font-size:44px;opacity:.5}
.lb-hist .empty .cta{margin-top:6px;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;font-weight:800;padding:10px 20px;border-radius:8px;text-decoration:none;box-shadow:var(--lb-shadow-gold)}

/* Personal Info (brand blue + white, mirrors React) */
.pi-page{background:var(--lb-bg);color:#1f2937;padding-bottom:16px;max-width:520px;margin:0 auto}
.pi-hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;background:#fff;padding:14px 16px;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.pi-hdr a{color:#64748b;text-decoration:none;line-height:1;font-size:22px}
.pi-hdr h1{margin:0;font-size:15px;font-weight:700;color:#0f172a}
.pi-banner{position:relative;margin:0 16px;user-select:none;-webkit-user-select:none}
.pi-banner img{width:100%;height:144px;object-fit:cover;border-radius:16px;display:block;pointer-events:none}
.pi-ava{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:rgba(43,79,168,.10);border:3px solid #fff;display:grid;place-items:center;color:var(--lb-primary);font-size:56px;box-shadow:0 6px 18px rgba(16,24,40,.18)}
.pi-name{margin-top:36px;display:flex;justify-content:center;align-items:center;gap:8px;padding:0 16px}
.pi-name b{font-size:22px;font-weight:700;color:#0f172a}
.pi-name .cp{display:inline-flex;align-items:center;gap:4px;background:var(--lb-primary);color:#fff;font-size:12px;font-weight:600;border:0;padding:4px 8px;border-radius:6px;cursor:pointer}
.pi-name .cp.on{background:#059669}
.pi-reg{margin:4px 0 0;text-align:center;font-size:13px;font-weight:600;color:#64748b}
.pi-vip{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:20px 16px 0;background:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.pi-vip .l{display:flex;align-items:center;gap:8px}
.pi-vip .l .k{color:#d97706;font-size:13px;font-weight:600}
.pi-vip .l .v{color:#0f172a;font-size:13px;font-weight:700}
.pi-vip a{background:var(--lb-primary);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;text-decoration:none}
.pi-list{margin:20px 16px 0;background:#fff;border-radius:12px;padding:0 14px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.pi-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #e8edf4}
.pi-row:last-child{border-bottom:0}
.pi-row .ic{width:32px;flex-shrink:0;color:var(--lb-primary);display:flex;justify-content:center;padding-top:2px;font-size:22px}
.pi-row .bd{flex:1;min-width:0}
.pi-row .lbl{font-size:14px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:6px}
.pi-row .lbl .lk{color:#94a3b8}
.pi-row .val{margin-top:4px;font-size:13px;color:#64748b}
.pi-row form.inl{display:flex;gap:6px;margin-top:6px}
.pi-row form.inl input{flex:1;background:#f4f7fb;border:1px solid #dbe3ee;color:#0f172a;padding:8px 10px;border-radius:8px;font-size:13px;outline:none}
.pi-row form.inl input:focus{border-color:var(--lb-primary)}
.pi-row form.inl button{background:var(--lb-primary);color:#fff;border:0;font-size:12px;font-weight:700;padding:0 12px;border-radius:8px;cursor:pointer}
.pi-row .act{margin-left:auto;flex-shrink:0;display:flex;align-items:center}
.pi-row .act .add{background:var(--lb-primary);border:0;color:#fff;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.pi-row .hint{font-size:11px;color:#94a3b8;margin-top:4px}
.pi-phones{padding:8px 0 8px 46px}
.pi-phones .row{display:flex;gap:8px;margin-bottom:8px}
.pi-phones .fld{flex:1;display:flex;align-items:center;gap:6px;background:#f4f7fb;border:1px solid #dbe3ee;border-radius:8px;padding:6px 10px}
.pi-phones .fld:focus-within{border-color:var(--lb-primary)}
.pi-phones .fld.v{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.45)}
.pi-phones .fld span{color:#0f172a;font-size:13px;font-weight:600}
.pi-phones .fld .bd{color:#059669;margin-left:auto}
.pi-phones .lockhint{margin:-4px 0 8px;font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:4px}
.pi-phones .addbtn{background:var(--lb-primary);color:#fff;border:0;padding:0 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700}
.pi-alert{margin:8px 16px;padding:8px 12px;border-radius:8px;font-size:13px}
.pi-alert.ok{background:rgba(16,185,129,.12);color:#047857}
.pi-alert.err{background:rgba(239,68,68,.12);color:#b91c1c}

/* Password (mirror React) */
.pw-page{background:var(--lb-bg);padding-bottom:16px;max-width:520px;margin:0 auto}
.pw-hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;background:var(--lb-card);border-bottom:1px solid var(--lb-border);padding:14px 16px;box-shadow:var(--lb-shadow-card)}
.pw-hdr a{color:var(--lb-muted);text-decoration:none;line-height:1;font-size:20px}
.pw-hdr h1{margin:0;font-size:15px;font-weight:800;color:var(--lb-fg)}
.pw-form{margin:12px;display:flex;flex-direction:column;gap:12px}
.pw-fld{background:var(--lb-card);border-radius:12px;padding:14px;box-shadow:var(--lb-shadow-card)}
.pw-fld label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--lb-fg)}
.pw-fld .in{display:flex;align-items:center;gap:8px;border:1px solid var(--lb-border);background:#f8fafc;border-radius:8px;padding:8px 12px;transition:border-color .2s}
.pw-fld .in:focus-within{border-color:var(--lb-primary)}
.pw-fld .in .ico,.pw-fld .in .eye{color:var(--lb-muted);flex-shrink:0;display:inline-grid;place-items:center;font-size:16px;background:none;border:0;cursor:pointer}
.pw-fld .in input{flex:1;border:0;background:transparent;font-size:13px;color:var(--lb-fg);outline:none}
.pw-alert{padding:10px 12px;border-radius:8px;font-size:13px}
.pw-alert.ok{background:rgba(43,79,168,.12);color:var(--lb-primary)}
.pw-alert.err{background:rgba(220,38,38,.1);color:var(--lb-destructive)}
.pw-btn{width:100%;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;font-weight:800;font-size:15px;padding:12px;border:0;border-radius:10px;box-shadow:var(--lb-shadow-gold);cursor:pointer}

/* Inbox (mirror React) */
.ib-page{background:var(--lb-bg);padding-bottom:16px;max-width:520px;margin:0 auto}
.ib-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--lb-card);padding:14px 16px;box-shadow:var(--lb-shadow-card)}
.ib-hdr .l{display:flex;align-items:center;gap:8px}
.ib-hdr .l .bl{color:var(--lb-primary);font-size:20px}
.ib-hdr h1{margin:0;font-size:15px;font-weight:800;color:var(--lb-fg)}
.ib-hdr .r{display:flex;align-items:center;gap:12px}
.ib-hdr .del-all{display:inline-flex;align-items:center;gap:4px;background:rgba(220,38,38,.1);color:var(--lb-destructive);border:1px solid rgba(220,38,38,.3);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.ib-hdr .del-all:hover{background:rgba(220,38,38,.2)}
.ib-hdr .x{color:var(--lb-muted);text-decoration:none;font-size:22px;line-height:1}
.ib-list{margin:12px;display:flex;flex-direction:column;gap:10px}
.ib-msg{display:flex;gap:12px;background:var(--lb-card);border-radius:12px;padding:14px;box-shadow:var(--lb-shadow-card)}
.ib-msg .bell{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--lb-gold-1),var(--lb-gold-2));color:#fff;display:grid;place-items:center;font-size:16px;box-shadow:var(--lb-shadow-gold)}
.ib-msg .bd{flex:1;min-width:0}
.ib-msg .ttl{margin:0;font-size:14px;font-weight:800;color:var(--lb-fg)}
.ib-msg .txt{margin:4px 0 0;font-size:13px;color:var(--lb-muted);white-space:pre-wrap;word-wrap:break-word}
.ib-msg .tm{margin:8px 0 0;font-size:11px;color:rgba(107,114,128,.7)}
.ib-msg .del{background:none;border:0;color:var(--lb-muted);padding:6px;border-radius:8px;cursor:pointer;flex-shrink:0;height:32px;width:32px;display:grid;place-items:center}
.ib-msg .del:hover{background:rgba(220,38,38,.1);color:var(--lb-destructive)}
.ib-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:80px 20px;color:var(--lb-muted);text-align:center}
.ib-empty .em{font-size:48px;opacity:.5}

/* ===== Global responsive foundation (Phase 1) ===== */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }
img, video { display: block; }
input, textarea, select { font-size: 16px; }
@media (min-width: 640px) { input, textarea, select { font-size: 14px; } }

/* Wider shells on tablet/desktop while preserving the lobby look */
@media (min-width: 640px) {
  .wrap-md,
  .lb-topbar .inner,
  .lb-marquee,
  .lb-cats,
  .lb-bal,
  .lb-sec,
  .lb-page,
  .lb-promo-inner,
  .lb-imgrow,
  .lb-people,
  .lb-app .inner,
  .lb-logged .row { max-width: 34rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .wrap-md,
  .lb-topbar .inner,
  .lb-marquee,
  .lb-cats,
  .lb-bal,
  .lb-sec,
  .lb-page,
  .lb-promo-inner,
  .lb-imgrow,
  .lb-people,
  .lb-app .inner,
  .lb-logged .row { max-width: 42rem; margin-left: auto; margin-right: auto; }
}

/* Bottom bars — respect safe area */
.lb-bottom, .lb-bottom-guest, .lb-bottom-loggedin {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Any accidental wide child cannot cause horizontal scroll */
main, section, article, .rp-page, .rp-section { max-width: 100%; }

/* Tables scroll horizontally instead of breaking layout */
.table-wrap, .rp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table, .rp-table-wrap table { min-width: 100%; }

/* Public lobby grids — games: 3 cols mobile, 4 tablet, 6 desktop; hot scales higher.
   .lb-provgrid handles its own responsive columns (3/4/6) — do not override here. */
@media (min-width: 640px) {
  .lb-games { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
  .lb-provs, #lb-hot .lb-games {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (min-width: 1024px) {
  .lb-games { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; }
  .lb-provs, #lb-hot .lb-games {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}


/* Payment method / stats grids stay balanced on wider screens */
@media (min-width: 640px) {
  .lb-methods, .lb-funds .fmeth { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lb-menu { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .lb-methods, .lb-funds .fmeth { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lb-menu { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
}

/* Account section grid scales up */
@media (min-width: 640px) {
  .rp-grid[style*="repeat(4"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rp-grid[style*="repeat(3"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Header/nav wrapping guards */
.lb-topbar .inner { gap: 8px; min-width: 0; }
.lb-topbar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-topbar .actions { flex-shrink: 0; }
.lb-topbar .chip { white-space: nowrap; }

/* Category strip — no wrap, ellipsis long labels */
.lb-cats .cat, .lb-cats button { flex: 0 0 auto; }
.lb-cats .cat span, .lb-cats button span { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Prevent overflow of long labels/values everywhere */
.rp-item .rp-lbl { word-break: break-word; }


/* ===== Phase 4: Account area responsive ===== */
/* Header truncation + wrap safety */
.rp-header .in { min-width: 0; }
.rp-header .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.rp-header .back, .rp-header .close { flex-shrink: 0; }

/* Wider account shells on tablet/desktop */
@media (min-width: 640px) {
  .rp-header .in, .rp-lgb .nav, .rp-promos { max-width: 34rem; }
  .rp-section { margin-left: auto; margin-right: auto; max-width: 34rem; }
}
@media (min-width: 1024px) {
  .rp-header .in, .rp-lgb .nav, .rp-promos { max-width: 42rem; }
  .rp-section { max-width: 42rem; }
}

/* Scale account grids up on wider screens */
@media (min-width: 640px) {
  .rp-grid { gap: 18px 10px; }
}
@media (min-width: 1024px) {
  .rp-item .rp-ic { width: 52px; height: 52px; }
  .rp-item .rp-lbl { font-size: 12px; }
}

/* Long usernames / balances never overflow */
.rp-item .rp-lbl, .rp-header .ttl span { overflow-wrap: anywhere; }

/* ==========================================================================
   Phase 8 — Deposit / Withdraw / Turnover / Transaction responsive polish
   ========================================================================== */

/* Funds: safe touch targets + no iOS zoom + long-amount safety */
.lb-funds .fam input,
.lb-funds .fam>span{font-size:16px}
.lb-funds .fchips button{min-height:44px}
.lb-funds .fsubmit{min-height:48px;font-size:16px}
.lb-funds .ftabs a{min-height:44px;display:grid;place-items:center}
.lb-funds .fbal .a{overflow-wrap:anywhere;word-break:break-word;text-align:right}
.lb-funds .fbal{gap:10px}
.lb-funds .fpromo .cur{min-width:0}

/* Narrow phones: 4 payment methods per row is too tight — keep 3 but tighter */
@media (max-width:360px){
  .lb-funds .fmeth{grid-template-columns:repeat(2,1fr)}
  .lb-funds .fchips{grid-template-columns:repeat(2,1fr)}
  .lb-funds .fbal .a{font-size:18px}
}

/* Tablet: wider container + 4 methods per row */
@media (min-width:640px){
  .lb-funds{max-width:640px}
  .lb-funds .fmeth{grid-template-columns:repeat(4,1fr)}
  .lb-funds .fchips{grid-template-columns:repeat(6,1fr)}
  .lb-funds .fbody{padding:16px}
  .lb-funds .fbal .a{font-size:26px}
}

/* Desktop: two-column form layout with sticky-ish balance */
@media (min-width:1024px){
  .lb-funds{max-width:860px}
  .lb-funds .fmeth{grid-template-columns:repeat(5,1fr)}
  .lb-funds .fh h1{font-size:17px}
  .lb-funds .fttl{font-size:14px}
}

/* Turnover cards: allow wrap on narrow screens; scale up on wider */
.lb-turn .tk-amt{overflow-wrap:anywhere}
.lb-turn .tk-rem b{overflow-wrap:anywhere}
@media (max-width:380px){
  .lb-turn .tk-side{width:76px;padding:10px 6px}
  .lb-turn .tk-amt{font-size:18px}
  .lb-turn .bsum b{font-size:12px}
}
@media (min-width:640px){
  .lb-turn{max-width:640px}
  .lb-turn .tlist{padding:16px;gap:14px}
  .lb-turn .tk-amt{font-size:26px}
  .lb-turn .tk-side{width:120px}
  .lb-turn .bsum b{font-size:15px}
}
@media (min-width:1024px){
  .lb-turn{max-width:860px}
  .lb-turn .tlist{display:grid;grid-template-columns:1fr 1fr;padding:20px}
}

/* Transaction history: card list becomes 2-col on tablet+; amounts never overflow */
.lb-hist .row .amt,
.lb-hist .row .ttl,
.lb-hist .row .sub{overflow-wrap:anywhere}
.lb-hist .row .rgt .amt{white-space:nowrap;font-weight:900}
.lb-hist .row{min-height:64px}
.lb-hist .ftabs a{min-height:44px;display:grid;place-items:center}
@media (min-width:640px){
  .lb-hist{max-width:720px}
  .lb-hist .list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media (min-width:1024px){
  .lb-hist{max-width:960px}
  .lb-hist .list{grid-template-columns:1fr 1fr 1fr}
}

/* Alerts inside funds/turnover never overflow */
.lb-alert{overflow-wrap:anywhere}

/* Sponsors / ambassadors two-column grids widen on tablet+desktop (matches React) */
@media (min-width: 640px) {
  .lb-sec > div[style*="1fr 1fr"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .lb-sec > div[style*="1fr 1fr"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Manual deposit account number (mirrors Lovable deposit card) */
.facc-box{margin-top:0}
.facc-row{display:flex;align-items:center;gap:8px;border:2px solid var(--primary,#1e63d0);background:#fff;border-radius:10px;padding:10px 12px}
.facc-num{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:900;letter-spacing:1.5px;color:#0b2d6b;user-select:all}
.fam.ftrx{border:2px solid rgba(30,99,208,.6);background:#fff}
.fam.ftrx input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:1px;color:#0b2d6b}
.fam.ftrx input::placeholder{font-weight:400;letter-spacing:0;color:rgba(11,45,107,.4)}
.facc-copy{flex:0 0 auto;border:0;border-radius:8px;background:rgba(212,175,55,.14);color:#e8c667;font-size:12px;font-weight:800;padding:6px 10px;cursor:pointer}
.facc-copy:hover{background:rgba(212,175,55,.24)}
.facc-ins{margin:8px 0 0;font-size:11px;line-height:1.7;color:rgba(255,255,255,.6);white-space:pre-line}

/* ===== Web app install help modal (mirrors React InstallAppDialog) ===== */
.pk-ih{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(3,7,18,.72);padding:16px}
.pk-ih.open{display:flex}
.pk-ih .box{width:100%;max-width:340px;border-radius:16px;border:1px solid #1e3a6f;background:#0f1c3f;color:#fff;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.pk-ih .hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.pk-ih .hd img{border-radius:8px}
.pk-ih .hd .x{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.7);font-size:22px;line-height:1;cursor:pointer}
.pk-ih .lead{margin:12px 0 8px;font-size:13px;font-weight:700;color:#fcd34d}
.pk-ih .row{background:rgba(255,255,255,.06);border-radius:10px;padding:10px;margin-bottom:8px;font-size:13px;line-height:1.5}
.pk-ih .row b{display:block;color:#fff}
.pk-ih .row span{color:rgba(255,255,255,.85)}
.pk-ih .note{margin:4px 0 0;font-size:11px;color:rgba(255,255,255,.6)}
.lb-app .dl{border:0;cursor:pointer;font-family:inherit}

/* Game list cards — 1:1 with Lovable /games (2 per row, separated white name bar) */
.lb-games-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.lb-games-2{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.lb-games-2{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lb-games-2 .lb-game{background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none;display:flex;flex-direction:column;gap:6px}
.lb-games-2 .lb-game::before{display:none}
.lb-games-2 .lb-game:hover{transform:translateY(-2px);box-shadow:none}
.lb-games-2 .lb-game .thumb{border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.lb-games-2 .lb-game .body{background:var(--lb-card,#fff);border-radius:8px;padding:12px;box-shadow:0 1px 2px rgba(15,23,42,.06);flex:0 0 auto}
.lb-games-2 .lb-game .title{font-size:14px;font-weight:400;line-height:1.2}
.lb-games-2 .lb-game .prov{display:none}