/* ======================================================================
   GAMEHUB CASINO BLUE UI v21
   Modern blue casino theme overlay — keeps all existing markup/logic intact
   ====================================================================== */
:root{
  --max:1508px;
  --side-w:86px;
  --bottom:76px;
  --cz-bg:#020614;
  --cz-bg2:#021535;
  --cz-panel:rgba(5,24,56,.86);
  --cz-panel2:rgba(8,38,84,.82);
  --cz-glass:rgba(6,28,66,.64);
  --cz-border:rgba(79,188,255,.34);
  --cz-border2:rgba(0,232,255,.72);
  --cz-cyan:#00e7ff;
  --cz-blue:#1687ff;
  --cz-blue2:#0757d6;
  --cz-deep:#020a1c;
  --cz-gold:#ffd66b;
  --cz-gold2:#ffb22e;
  --cz-green:#35f28a;
  --cz-red:#ff4b63;
  --cz-text:#f7fbff;
  --cz-muted:#9eb9de;
  --cz-shadow:0 24px 70px rgba(0,0,0,.46);
  --cz-soft:0 16px 42px rgba(0,0,0,.28);
}
*{scrollbar-color:rgba(0,231,255,.42) rgba(4,15,36,.7)}
html,body{background:var(--cz-bg)!important;color:var(--cz-text);overflow-x:hidden}
body:before{background:
  radial-gradient(circle at 12% -8%,rgba(0,231,255,.26),transparent 28%),
  radial-gradient(circle at 92% 12%,rgba(20,113,255,.26),transparent 26%),
  radial-gradient(circle at 50% 120%,rgba(0,76,180,.32),transparent 34%),
  linear-gradient(180deg,#010611 0%,#021a43 36%,#020714 74%,#031d48 100%)!important}
body:after{opacity:.95;background:
  radial-gradient(circle at 16% 26%,rgba(0,231,255,.12),transparent 24%),
  radial-gradient(circle at 88% 8%,rgba(255,211,105,.12),transparent 28%),
  linear-gradient(90deg,rgba(0,231,255,.035) 1px,transparent 1px),
  linear-gradient(rgba(0,231,255,.026) 1px,transparent 1px),
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.016) 23px 24px)!important;
  background-size:auto,auto,48px 48px,48px 48px,auto!important}
body::selection{background:rgba(0,231,255,.36);color:#fff}

/* brand / chrome */
.app-install{background:linear-gradient(90deg,rgba(3,16,40,.94),rgba(5,45,104,.94),rgba(3,16,40,.94));border-bottom:1px solid rgba(0,231,255,.2);box-shadow:0 10px 32px rgba(0,0,0,.32);backdrop-filter:blur(18px)}
.install-btn,.deposit-action,.btn-main,.auth-row .register,.rail-quick button,.rail-account.guest button{background:linear-gradient(180deg,#40f4ff 0%,#0487ff 52%,#0459d6 100%)!important;color:#fff!important;border:0!important;box-shadow:0 12px 26px rgba(0,145,255,.28),inset 0 1px 0 rgba(255,255,255,.34)!important;text-shadow:0 1px 8px rgba(0,0,0,.28)}
.brand-logo{font-family:'Noto Sans Thai',system-ui,sans-serif!important;letter-spacing:-.4px;color:#e9fbff!important;text-shadow:0 0 10px rgba(0,231,255,.9),0 2px 0 rgba(0,0,0,.56)!important;background:
  linear-gradient(180deg,rgba(255,255,255,.18),transparent 38%),
  linear-gradient(135deg,#05205b,#064ed2 46%,#01dbff)!important;border:1px solid rgba(155,239,255,.68)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 26px rgba(0,231,255,.34),0 12px 26px rgba(0,0,0,.34)!important}
.brand-logo:before,.brand-logo:after{border-color:rgba(0,231,255,.82)!important;background:#031538!important;box-shadow:0 0 12px rgba(0,231,255,.3)}
.topbar{background:linear-gradient(180deg,rgba(3,20,50,.88),rgba(2,9,24,.88))!important;border-bottom:1px solid rgba(0,231,255,.18)!important;box-shadow:0 16px 44px rgba(0,0,0,.36);backdrop-filter:blur(20px)}
.topbar-inner{height:78px}.icon-btn,.desktop-search-btn{background:linear-gradient(180deg,rgba(14,78,166,.92),rgba(3,25,66,.96))!important;border:1px solid rgba(0,231,255,.38)!important;color:#c9fbff!important;box-shadow:0 12px 25px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16)!important}.icon-btn:hover,.desktop-search-btn:hover{filter:brightness(1.12)}
.desktop-auth .btn-login,.btn-login,.auth-row .login,.rail-quick button:nth-child(2){background:linear-gradient(180deg,#ffe07b,#ffb331 58%,#b56a12)!important;color:#160b00!important;border:0!important;box-shadow:0 14px 28px rgba(255,177,48,.2),inset 0 1px 0 rgba(255,255,255,.45)!important;text-shadow:none!important}.desktop-auth .btn-register,.btn-register{background:linear-gradient(180deg,#40f4ff 0%,#0487ff 52%,#0459d6 100%)!important;color:#fff!important;border:0!important;box-shadow:0 12px 26px rgba(0,145,255,.28),inset 0 1px 0 rgba(255,255,255,.34)!important;text-shadow:0 1px 8px rgba(0,0,0,.28)!important}.desktop-promo-btn{border-color:rgba(255,214,107,.42)!important;background:linear-gradient(180deg,rgba(16,56,120,.94),rgba(4,18,48,.96))!important;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.cat-tabs{background:linear-gradient(180deg,rgba(1,12,31,.9),rgba(1,8,22,.92))!important;border-bottom:1px solid rgba(0,231,255,.18)!important;backdrop-filter:blur(18px)}.cat-tab{position:relative;overflow:hidden;border:1px solid transparent;border-radius:16px;color:#bad2f4!important}.cat-tab:hover{background:rgba(0,231,255,.08)!important;border-color:rgba(0,231,255,.2);color:#fff!important}.cat-tab.active{background:linear-gradient(180deg,rgba(0,231,255,.18),rgba(0,105,255,.08))!important;border:1px solid rgba(0,231,255,.38)!important;box-shadow:inset 0 -2px 0 var(--cz-cyan),0 10px 24px rgba(0,0,0,.18)!important}.cat-tab i,.cat-tab.active i{color:var(--cz-cyan)!important;text-shadow:0 0 12px rgba(0,231,255,.5)}

/* layout */
.app{max-width:var(--max)!important;gap:18px;padding:18px 22px 34px}.main{position:relative}.desktop-side,.right-sidebar{top:204px}.panel,.notice,.bar-title,.jackpot-card,.lb-card,.minigame-card,.shortcut-card,.rail-account,.rail-link,.provider-card,.game-card,.online-box,.live-card,.guide-row,.modal-card{border:1px solid var(--cz-border)!important;background:linear-gradient(180deg,rgba(9,38,84,.82),rgba(2,12,31,.92))!important;box-shadow:var(--cz-soft)!important;backdrop-filter:blur(14px)}.panel,.shortcut-card{border-radius:24px!important}.notice{height:auto;min-height:46px;border-radius:16px!important;color:#e7f7ff;background:linear-gradient(90deg,rgba(4,25,60,.86),rgba(3,45,101,.66),rgba(4,25,60,.86))!important}.notice i{color:var(--cz-cyan);filter:drop-shadow(0 0 8px rgba(0,231,255,.55))}
.section-head{padding:2px 2px 0}.section-head h2,.bar-title{letter-spacing:-.35px}.section-head h2 i,.bar-title i{color:var(--cz-cyan);filter:drop-shadow(0 0 10px rgba(0,231,255,.42))}.section-head small,.section-head p,.game-count-note,.deposit-note{color:var(--cz-muted)!important}.bar-title{border-radius:20px!important;padding:13px 16px!important;background:linear-gradient(90deg,rgba(0,231,255,.16),rgba(0,94,225,.14),rgba(255,214,107,.1))!important;position:relative;overflow:hidden}.bar-title:after,.panel:after,.provider-card:after,.game-card:after,.deposit-account:after,.modal-card:after{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.09) 48%,transparent 58%);transform:translateX(-120%);transition:transform .55s ease}.bar-title:hover:after,.panel:hover:after,.provider-card:hover:after,.game-card:hover:after,.deposit-account:hover:after,.modal-card:hover:after{transform:translateX(120%)}.panel,.provider-card,.game-card,.deposit-account,.modal-card{position:relative;overflow:hidden}.empty{color:#b4cae9!important;background:rgba(0,0,0,.12);border-radius:16px}

/* hero */
.hero-slider{border-radius:26px!important;border:1px solid rgba(0,231,255,.42)!important;box-shadow:0 28px 86px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)!important;background:radial-gradient(circle at 72% 28%,rgba(0,231,255,.18),transparent 34%),linear-gradient(135deg,#031634,#063b8d)!important;min-height:250px}.hero-slider:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 28%,transparent 70%,rgba(0,0,0,.22)),linear-gradient(180deg,transparent 50%,rgba(0,0,0,.32))}.hero-slide picture img{filter:saturate(1.08) contrast(1.03)}.hero-fallback{background:radial-gradient(circle at 78% 36%,rgba(0,231,255,.24),transparent 30%),radial-gradient(circle at 90% 12%,rgba(255,214,107,.22),transparent 22%),linear-gradient(135deg,#04122c,#09419d 70%,#031028)!important}.hero-fallback h1{color:#ebfbff!important;text-shadow:0 0 18px rgba(0,231,255,.58),0 2px 0 rgba(0,0,0,.52)!important}.hero-arrow{z-index:5;background:rgba(2,14,34,.68)!important;border:1px solid rgba(0,231,255,.38)!important;backdrop-filter:blur(12px)}.hero-dot{background:rgba(255,255,255,.32)!important}.hero-dot.active{width:26px!important;background:linear-gradient(90deg,var(--cz-cyan),#1c78ff)!important;box-shadow:0 0 14px rgba(0,231,255,.55)}

/* auth + quick menu */
.auth-row{margin:14px 0!important}.auth-row button{height:54px!important;border-radius:18px!important;font-size:16px!important}.rb-quick-title{margin:18px 0 10px!important;color:#e8faff!important;font-weight:1000}.rb-quick-title i{color:var(--cz-gold);filter:drop-shadow(0 0 10px rgba(255,214,107,.34))}.rb-quick-menu{gap:12px!important}.rb-quick-item{border-radius:20px!important;border:1px solid rgba(0,231,255,.3)!important;background:linear-gradient(180deg,rgba(9,48,109,.84),rgba(3,15,38,.94))!important;box-shadow:0 14px 32px rgba(0,0,0,.26)!important;min-height:96px!important;position:relative;overflow:hidden}.rb-quick-item span{background:linear-gradient(180deg,rgba(0,231,255,.18),rgba(0,93,255,.08))!important;border:1px solid rgba(0,231,255,.26)!important;color:#dffcff!important;box-shadow:0 0 16px rgba(0,231,255,.16)}.rb-quick-item small{color:#9fc4f2!important}.rb-quick-item:hover{transform:translateY(-3px);border-color:rgba(0,231,255,.72)!important}
.tab-row{gap:10px!important}.tab-pill{border:1px solid rgba(0,231,255,.26)!important;background:rgba(5,26,62,.66)!important;color:#d9edff!important;border-radius:999px!important}.tab-pill.active{background:linear-gradient(180deg,#34eefe,#0869ef)!important;color:#fff!important;box-shadow:0 12px 26px rgba(0,126,255,.22)}

/* side rails */
.rail-account{border-radius:24px!important;padding:16px!important}.rail-avatar,.top-avatar,.profile-avatar{background:linear-gradient(180deg,#38f2ff,#0a6dff)!important;color:#fff!important;box-shadow:0 0 20px rgba(0,231,255,.3)}.rail-balance,.top-balance-card,.balance-box{background:rgba(0,7,22,.54)!important;border:1px solid rgba(0,231,255,.22)!important;border-radius:16px!important}.rail-balance b,.top-balance-card b,.balance-box{color:#eefdff!important}.rail-link{height:78px!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(9,42,93,.82),rgba(3,14,35,.94))!important;color:#dceeff!important}.rail-link .ricon{background:rgba(0,231,255,.1)!important;color:var(--cz-cyan)!important;border:1px solid rgba(0,231,255,.18)}.rail-link.active{background:linear-gradient(180deg,#ecfbff,#99ddff)!important;color:#031733!important;box-shadow:0 16px 34px rgba(0,151,255,.24)!important}.rail-link.active .ricon{background:rgba(4,76,167,.14)!important;color:#005ce8!important}.rail-account-logout{width:100%;margin-top:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,70,70,.28);background:rgba(60,5,5,.7);color:#ffb0b0;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.15s}.rail-account-logout:hover{background:rgba(120,15,15,.85);color:#ffd0d0}.drawer-logout-btn{width:100%;padding:14px 18px;border-radius:14px;border:1px solid rgba(255,80,80,.3);background:linear-gradient(180deg,rgba(80,10,10,.85),rgba(40,5,5,.95));color:#ffb8b8;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.15s;margin-bottom:8px}.drawer-logout-btn:hover{filter:brightness(1.15)}.drawer{background:linear-gradient(180deg,#031836,#020814)!important;border-right:1px solid rgba(0,231,255,.24)!important}.drawer-head{border-bottom:1px solid rgba(0,231,255,.18)!important}.drawer-nav-item{border:1px solid rgba(0,231,255,.18)!important;background:rgba(5,28,66,.58)!important;border-radius:16px!important}.drawer-nav-item i{color:var(--cz-cyan)!important}

/* cards */
.game-grid{gap:14px!important}.game-card{border-radius:8px!important;transition:transform .2s ease,box-shadow .2s ease!important}.game-card:hover{transform:translateY(-5px)!important;box-shadow:0 25px 60px rgba(0,0,0,.45)!important}.game-thumb{aspect-ratio:16/9!important;border-radius:8px!important;background:#020b1d!important}.game-thumb img{object-fit:contain!important;object-position:center!important}.game-thumb:before{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%,rgba(0,0,0,.5))!important}.game-info{min-height:78px!important;background:linear-gradient(180deg,rgba(6,28,65,.98),rgba(2,9,25,.98))!important}.game-info b{font-size:15px!important}.game-info span{color:#a9c6eb!important}.game-badge{background:linear-gradient(180deg,#ffe17a,#ff9f1f)!important;color:#1e0f00!important;border:0!important;text-shadow:none!important}.provider-grid{gap:14px!important}.provider-card{border-radius:22px!important;min-height:144px!important}.provider-card:hover{transform:translateY(-4px);border-color:rgba(0,231,255,.78)!important;box-shadow:0 23px 55px rgba(0,0,0,.38),0 0 28px rgba(0,231,255,.12)!important}.provider-logo{border-radius:18px!important;background:rgba(0,7,20,.42)!important;border:1px solid rgba(0,231,255,.18)!important}.provider-meta b{color:#fff!important}.provider-meta span,.provider-count{color:#aac5ea!important}.online-box{border-radius:20px!important}.online-img{background:rgba(0,7,22,.42)!important;border:1px solid rgba(0,231,255,.2)!important}.count i,.lc-live{color:var(--cz-green)!important;filter:drop-shadow(0 0 8px rgba(53,242,138,.52))}.live-card{border-radius:22px!important}.lc-logo{background:linear-gradient(180deg,#37edff,#0d75ff)!important}.lc-watch,.lc-bet{border-radius:14px!important}.lc-bet{background:linear-gradient(180deg,#ffe27b,#ffae25)!important;color:#190c00!important}.guide-row{border-radius:18px!important}.guide-row summary{color:#eaf7ff!important}.guide-row p{color:#a9c0df!important}

/* wallet/deposit */
.deposit-wrap{gap:14px!important}.deposit-methods{gap:12px!important}.deposit-method{border-radius:22px!important;background:linear-gradient(180deg,rgba(8,37,84,.82),rgba(3,14,34,.94))!important;border:1px solid rgba(0,231,255,.26)!important;box-shadow:0 14px 32px rgba(0,0,0,.24)!important}.deposit-method i{color:var(--cz-cyan)!important}.deposit-method small{color:#9cbbe3!important}.deposit-method.active{background:linear-gradient(180deg,rgba(0,231,255,.2),rgba(0,94,255,.12))!important;border-color:rgba(0,231,255,.74)!important;box-shadow:0 16px 38px rgba(0,129,255,.22)!important}.deposit-title h3{color:#fff!important}.deposit-title span{color:var(--cz-cyan)!important}.deposit-account{border-radius:20px!important;background:linear-gradient(180deg,rgba(7,35,78,.78),rgba(2,10,27,.9))!important;border:1px solid rgba(0,231,255,.24)!important}.deposit-account img,.wallet-round{width:52px!important;height:52px!important;border-radius:16px!important;background:rgba(255,255,255,.98)!important;padding:7px!important}.deposit-account span{color:#a9c4ea!important}.copy-btn{background:rgba(0,231,255,.12)!important;border:1px solid rgba(0,231,255,.32)!important;color:#e8fbff!important;border-radius:14px!important}.deposit-upload{border-radius:22px!important;background:linear-gradient(180deg,rgba(0,231,255,.08),rgba(0,7,22,.42))!important;border:1.5px dashed rgba(0,231,255,.48)!important}.deposit-preview{border-radius:18px!important;border:1px solid rgba(0,231,255,.32)!important;box-shadow:0 16px 32px rgba(0,0,0,.25)}.history-item{border-radius:16px!important;background:rgba(0,9,25,.55)!important;border:1px solid rgba(0,231,255,.18)!important}.form-grid{gap:12px!important}.input,input,select,textarea{background:rgba(0,8,24,.68)!important;border:1px solid rgba(107,180,255,.34)!important;color:#fff!important;border-radius:16px!important}.input:focus,input:focus,select:focus,textarea:focus{border-color:rgba(0,231,255,.82)!important;box-shadow:0 0 0 3px rgba(0,231,255,.12)!important}label{color:#bad0ed!important}

/* modals */
.modal{background:rgba(1,5,14,.78)!important;backdrop-filter:blur(8px)}.modal-card{border-radius:28px!important;background:linear-gradient(180deg,rgba(8,39,88,.96),rgba(2,10,28,.98))!important;border-color:rgba(0,231,255,.38)!important;box-shadow:0 34px 105px rgba(0,0,0,.72),0 0 42px rgba(0,231,255,.12)!important}.modal-head{border-bottom:1px solid rgba(0,231,255,.18);background:linear-gradient(90deg,rgba(0,231,255,.12),rgba(0,94,255,.08))}.close-btn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important}.auth-tabs{background:rgba(0,8,24,.54)!important;border-radius:18px!important}.auth-tabs button{border-radius:15px!important}.auth-tabs button.active{background:linear-gradient(180deg,#35eeff,#086eff)!important;color:#fff!important}.promo-item{border-radius:18px!important;background:rgba(4,20,50,.68)!important;border:1px solid rgba(0,231,255,.18)!important}.promo-item.active{border-color:rgba(0,231,255,.7)!important;background:linear-gradient(180deg,rgba(0,231,255,.16),rgba(4,25,60,.76))!important}.promo-preview-img,.promo-detail-card{border-color:rgba(0,231,255,.2)!important;background:rgba(0,7,22,.42)!important;border-radius:20px!important}.promo-preview h2{color:#eafcff!important;text-shadow:0 0 14px rgba(0,231,255,.36)}

/* footer/bottom nav */
.footer{background:linear-gradient(180deg,rgba(1,8,21,.3),rgba(1,6,16,.86))!important;border-top:1px solid rgba(0,231,255,.14)!important}.bank-logo{background:rgba(255,255,255,.96)!important;border-radius:14px!important;box-shadow:0 10px 24px rgba(0,0,0,.22)}.bottom-nav{background:linear-gradient(180deg,rgba(2,18,44,.84),rgba(1,8,22,.96))!important;border-top:1px solid rgba(0,231,255,.22)!important;backdrop-filter:blur(18px)}.nav-item{color:#b8d0ef!important}.nav-item.active{color:#fff!important}.nav-icon{background:rgba(0,231,255,.1)!important;border:1px solid rgba(0,231,255,.18)!important}.nav-item.active .nav-icon{background:linear-gradient(180deg,#35eeff,#0b6fff)!important;color:#fff!important;box-shadow:0 0 18px rgba(0,231,255,.34)}
@media (max-width:520px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .footer-grid h4{font-size:13px!important;margin-bottom:9px!important}
  .footer-grid ul{gap:6px!important}
  .footer-grid ul a{font-size:12px!important;line-height:1.35!important}
  .footer-cert,.footer-contact{gap:7px!important}
  .footer-cert .cert{min-width:0!important;height:auto!important;min-height:34px!important;padding:7px 9px!important;font-size:10px!important}
}

/* subtle motion */
@keyframes czFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.jackpot-card .jp-img,.shortcut-right{animation:czFloat 4.2s ease-in-out infinite}.jp-title,.lb-title,.mg-title{color:#e8fbff!important}.jp-img{border-radius:22px!important;background:radial-gradient(circle at 50% 30%,rgba(0,231,255,.26),transparent 44%),linear-gradient(135deg,#041430,#0649b5)!important}.jp-img b{color:#fff!important;text-shadow:0 0 20px rgba(0,231,255,.6)}

/* responsive */
@media (min-width:1024px){.app{grid-template-columns:240px minmax(0,1fr) 318px!important}.hero-slider{height:350px!important}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.provider-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.desktop-auth{display:flex!important}.cat-tabs{display:block!important}.desktop-search-btn,.desktop-promo-btn{display:inline-flex!important}.right-sidebar{max-width:318px!important}}
@media (min-width:1440px){.game-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.provider-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media (max-width:1180px) and (min-width:1024px){.app{grid-template-columns:220px minmax(0,1fr) 286px!important}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:1023px){.app{grid-template-columns:82px minmax(0,1fr)!important;padding:12px 12px 24px!important;gap:10px!important}.desktop-side{top:126px}.hero-slider{border-radius:22px!important;min-height:210px}.toolbar{grid-template-columns:1fr!important}.deposit-wrap{grid-template-columns:1fr!important}.deposit-methods{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}.deposit-method{min-height:86px!important;padding:10px 8px!important;text-align:center;justify-content:center}.deposit-method div{align-items:center!important}.topbar-inner{height:64px}.rail-account{display:none!important}.rail-link{height:66px!important}.rail-link .ricon{width:34px!important;height:34px!important}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.provider-card{min-height:112px!important}.rb-quick-menu{grid-template-columns:repeat(3,minmax(0,1fr))!important}.rb-quick-item{min-height:86px!important}.right-sidebar{display:none!important}.modal{padding:12px!important}.modal-card{border-radius:22px!important;width:min(96vw,760px)!important}}
@media (max-width:767px){:root{--side-w:68px}.app-install{height:48px!important}.topbar{top:48px!important}.topbar-inner{height:58px!important;padding:0 9px!important}.topbar .logo{gap:8px!important}.topbar .logo .brand-logo{min-width:104px!important;height:40px!important;font-size:17px!important}.flag-btn{width:34px!important;height:34px!important}.app{grid-template-columns:68px minmax(0,1fr)!important;gap:7px!important;padding:9px 7px 22px!important}.desktop-side{top:112px}.notice{min-height:40px;font-size:12px!important;border-radius:13px!important;padding:7px 10px!important}.hero-slider{aspect-ratio:1.25/1!important;min-height:180px!important;border-radius:18px!important}.auth-row button{height:48px!important;font-size:14px!important;border-radius:15px!important}.rb-quick-menu{gap:7px!important}.rb-quick-item{border-radius:15px!important;min-height:76px!important}.rb-quick-item span{width:32px!important;height:32px!important}.rb-quick-item b{font-size:12px!important}.rb-quick-item small{font-size:10px!important}.section-head h2{font-size:22px!important}.panel{border-radius:18px!important;padding:12px!important}.game-grid{gap:7px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.provider-grid{gap:7px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}.game-card{border-radius:8px!important}.game-thumb{border-radius:8px!important}.game-info{min-height:60px!important;padding:8px!important}.game-info b{font-size:11.5px!important;line-height:1.1!important}.game-info span{font-size:10px!important}.game-badge{font-size:9px!important;padding:4px 7px!important}.provider-card{border-radius:14px!important;min-height:98px!important;padding:8px!important}.provider-logo{height:52px!important;border-radius:12px!important}.provider-meta b{font-size:11px!important}.provider-count{font-size:10px!important}.rail-link{height:56px!important;border-radius:14px!important}.rail-link .ricon{width:28px!important;height:28px!important}.rail-text{font-size:9px!important}.bar-title{border-radius:15px!important;font-size:14px!important;padding:10px 12px!important}.deposit-methods{gap:7px!important}.deposit-method{border-radius:15px!important;min-height:78px!important}.deposit-method i{font-size:20px!important}.deposit-method b,.deposit-method div{font-size:12px!important}.deposit-method small{font-size:9px!important}.deposit-account{border-radius:15px!important;padding:10px!important}.deposit-account img,.wallet-round{width:42px!important;height:42px!important;border-radius:12px!important}.footer{padding-bottom:calc(var(--bottom) + 18px)!important}.promo-layout{display:block!important}.promo-list,.promo-preview{display:none!important}.promo-mobile-carousel{display:block!important}.modal-head{height:56px!important}.modal-body{padding:14px!important}}
@media (max-width:390px){:root{--side-w:62px}.app{grid-template-columns:62px minmax(0,1fr)!important;padding-left:6px!important;padding-right:6px!important}.rail-link{height:54px!important}.game-grid,.provider-grid{gap:6px!important}.game-info b{font-size:10.8px!important}.provider-card{min-height:92px!important}.hero-slider{min-height:168px!important}.brand-logo{min-width:92px!important}}

/* v21 extra landing highlights */
.casino-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.casino-stats>div{min-height:86px;border-radius:22px;border:1px solid rgba(0,231,255,.26);background:linear-gradient(180deg,rgba(7,37,84,.78),rgba(2,12,31,.92));box-shadow:0 14px 32px rgba(0,0,0,.24);display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;align-items:center;padding:14px;position:relative;overflow:hidden}
.casino-stats>div:before{content:"";position:absolute;inset:auto -18px -36px auto;width:90px;height:90px;border-radius:50%;background:rgba(0,231,255,.08)}
.casino-stats i{grid-row:1/3;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,#35eeff,#0b6fff);color:#fff;font-size:20px;box-shadow:0 0 20px rgba(0,231,255,.26)}
.casino-stats b{font-size:15px;font-weight:1000;color:#fff;align-self:end}.casino-stats span{font-size:12px;color:#9fc0e8;align-self:start}
@media(max-width:767px){.casino-stats{grid-template-columns:1fr;gap:7px;margin:10px 0}.casino-stats>div{min-height:64px;border-radius:15px;grid-template-columns:38px 1fr;padding:10px}.casino-stats i{width:38px;height:38px;border-radius:12px;font-size:16px}.casino-stats b{font-size:13px}.casino-stats span{font-size:11px}}

/* ============================================================================
   v22 IMAGE DISPLAY FIX
   - แสดงรูปเต็ม ไม่ตัดขอบ ไม่ยืดสัดส่วน
   - ปิดพื้นหลังเบลอ/ภาพซ้อนหลังทั้งหมด
   ============================================================================ */
.hero-slide .blur-bg,
.game-thumb .blur-bg,
.promo-item .blur-bg,
.blur-bg{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  filter:none!important;
  background-image:none!important;
}

.hero-slider,
.hero-slide,
.hero-slide picture,
.game-thumb,
.promo-item,
.promo-preview-img,
.provider-logo,
.online-img,
.lb-game-icon,
.bank-logo,
.deposit-account,
.bank-item{
  overflow:hidden!important;
}

/* Banner / Hero: เห็นรูปทั้งใบ ไม่ crop */
.hero-slide picture,
.hero-slide picture img,
.hero-slide > img,
.hero-slide img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
.hero-slide,
.hero-slider{
  background:linear-gradient(135deg,#031634,#062b66 62%,#020b1d)!important;
}
.hero-slider:before{
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2))!important;
  pointer-events:none!important;
}
.hero-slide:after{
  display:none!important;
}

/* Game cards: ไม่ตัดรูปเกม ไม่ zoom ตอน hover */
.game-thumb{
  background:linear-gradient(180deg,#041936,#020a1a)!important;
  display:grid!important;
  place-items:center!important;
}
.game-thumb img,
.game-card .game-thumb img{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
.game-card:hover .game-thumb img{
  transform:none!important;
  filter:none!important;
}
.game-thumb:before{
  display:none!important;
}

/* Promotion / popup images */
.promo-item img,
.promo-preview-img img,
.promo-detail-card img,
.online-img img,
.lb-game-icon img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
.promo-item img{
  background:linear-gradient(180deg,#041936,#020a1a)!important;
}

/* Provider / bank / wallet logos */
.provider-logo img,
.bank-logo img,
.bank-item img,
.deposit-account img,
.deposit-account .wallet-round,
.live-card .lc-team .lc-logo img{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
.provider-logo img{
  width:auto!important;
  height:auto!important;
  max-width:88%!important;
  max-height:74px!important;
}

/* ลด overlay ที่ทำให้รูปดูมืดหรือเหมือนโดนเบลอ */
.game-card:after,
.provider-card:after,
.deposit-account:after,
.modal-card:after,
.panel:after,
.bar-title:after{
  display:none!important;
}

@media(max-width:700px){
  .hero-slider{min-height:150px!important;border-radius:18px!important}
  .game-thumb img{padding:2px!important}
  .promo-item img{width:96px!important;height:72px!important;object-fit:contain!important}
}

/* ===== v23 requested cleanup: full image cards, no flags, no shortcut blur ===== */
.app-install{display:none!important}
.topbar{top:0!important}.cat-tabs{top:78px!important}.desktop-side,.right-sidebar{top:144px!important}
.flag-btn{display:none!important}

.jp-img.jackpot-gif{
  min-height:160px!important;
  background-image:linear-gradient(90deg,rgba(0,8,25,.20),rgba(0,80,180,.12)),url('https://cdn.zabbet.com/JG8U/highlight/1725948738165-4cb4f1ec-44ed-4b21-99ed-398fbb6d7b25.gif')!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
.jp-img.jackpot-gif>div{width:100%;height:100%;display:grid;place-items:center;background:transparent!important;text-align:center;padding-top:34px}
.jp-img.jackpot-gif b{font-size:clamp(25px,3vw,34px)!important;letter-spacing:1px;color:#fff!important;text-shadow:0 0 8px #7af7ff,0 0 22px rgba(0,231,255,.9)}
.jp-img.jackpot-gif small{text-transform:uppercase;color:#ffe48a!important;font-weight:900!important;text-shadow:0 0 12px rgba(255,208,70,.75)}

.online-grid,.live-list,.minigame-card,.shortcut-card{display:none!important}
.lb-table.real-users th:nth-child(3),.lb-table.real-users td:nth-child(3){display:table-cell!important}
.lb-subname{display:block;font-size:10px;color:#85a8d4;margin-top:2px}.lb-win{color:#35f28a;text-shadow:0 0 10px rgba(53,242,138,.35)}

.provider-card{padding:0!important;display:grid!important;place-items:center!important;min-height:auto!important;aspect-ratio:1/1!important;background:linear-gradient(180deg,rgba(6,31,70,.92),rgba(1,8,24,.96))!important}.game-card{padding:0!important;display:grid!important;place-items:center!important;min-height:auto!important;aspect-ratio:16/9!important;background:linear-gradient(180deg,rgba(6,31,70,.92),rgba(1,8,24,.96))!important}
.provider-logo,.game-thumb{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;border:0!important;border-radius:inherit!important;margin:0!important;background:#020b1d!important;display:grid!important;place-items:center!important;overflow:hidden!important}
.provider-logo img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;padding:8px!important;background:transparent!important}.game-thumb img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;padding:0!important;background:transparent!important}
.provider-meta,.game-info,.game-count-note{display:none!important}
.provider-badge,.game-badge{z-index:5!important;top:8px!important;right:8px!important;left:auto!important;border-radius:999px!important;box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 12px rgba(0,231,255,.35)!important}
.game-card:hover,.provider-card:hover{transform:translateY(-3px)!important}

.footer .brand-logo,.shortcut-left,.shortcut-right{display:none!important}
.footer{border-top:1px solid rgba(0,231,255,.2)!important;background:#020814!important}

@media(max-width:1023px){.topbar{top:0!important}.desktop-side{top:72px!important}.app{padding-top:10px!important}.jp-img.jackpot-gif{min-height:150px!important}}
@media(max-width:767px){.topbar{top:0!important}.desktop-side{top:66px!important}.cat-tabs{top:58px!important}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.provider-logo img{padding:5px!important}.game-thumb img{padding:0!important}.jp-img.jackpot-gif{min-height:132px!important}.jp-img.jackpot-gif b{font-size:24px!important}}

/* ฝาก / ถอน / ประวัติ เป็นโมเดลแบบใหม่ */
.wallet-modal-open{overflow:hidden!important}
.wallet-modal-section{position:fixed!important;z-index:1000!important;inset:0!important;padding:clamp(12px,3vw,28px)!important;background:rgba(0,5,18,.76)!important;backdrop-filter:blur(10px)!important;overflow:auto!important;display:block!important}
.wallet-modal-section>.section-head,.wallet-modal-section>.deposit-wrap,.wallet-modal-section>.panel{max-width:920px!important;margin-left:auto!important;margin-right:auto!important}
.wallet-modal-section>.section-head{margin-top:24px!important;border:1px solid rgba(0,231,255,.28)!important;border-bottom:0!important;border-radius:24px 24px 0 0!important;padding:16px 18px!important;background:linear-gradient(90deg,rgba(0,231,255,.18),rgba(4,20,50,.94))!important}
.wallet-modal-section>.deposit-wrap,.wallet-modal-section>.panel{border-radius:0 0 24px 24px!important;border:1px solid rgba(0,231,255,.28)!important;background:linear-gradient(180deg,rgba(5,26,60,.96),rgba(1,8,24,.98))!important;padding:18px!important}
.modalized-head{position:relative!important}.modal-close-page{margin-left:auto;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:18px}
@media(max-width:767px){.wallet-modal-section{padding:8px!important}.wallet-modal-section>.section-head{margin-top:8px!important;border-radius:18px 18px 0 0!important}.wallet-modal-section>.deposit-wrap,.wallet-modal-section>.panel{border-radius:0 0 18px 18px!important;padding:12px!important}}

/* ======================================================================
   GAMEHUB CASINO BLUE UI v24
   Fixes: modal close, larger framed jackpot gif with fade animation,
   free Font Awesome icons, full provider/game images without crop/stretch.
   ====================================================================== */
.fa-user-crown:before{content:"\f007"!important}.fa-vault:before{content:"\f555"!important}.fa-dharmachakra:before{content:"\f522"!important}.fa-money-bill-trend-up:before{content:"\f201"!important}.fa-ticket:before{content:"\f145"!important}.fa-award:before{content:"\f559"!important}
.modal{transition:opacity .22s ease,visibility .22s ease!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}.modal.show{opacity:1!important;visibility:visible!important;pointer-events:auto!important;animation:czModalFadeIn .24s ease both!important}.modal .modal-card{animation:czModalPop .24s ease both!important;max-height:92vh!important;overflow:auto!important}.modal .close-btn,.close-btn,.modal-close-page{position:relative!important;z-index:50!important;cursor:pointer!important;pointer-events:auto!important;display:inline-grid!important;place-items:center!important;flex:0 0 auto!important}.auth-modal.has-side .modal-head{display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(90deg,rgba(0,231,255,.13),rgba(5,20,48,.96))!important;border-bottom:1px solid rgba(0,231,255,.22)!important}.auth-modal.has-side .close-btn{position:absolute!important;right:12px!important;top:12px!important;width:42px!important;height:42px!important;border-radius:14px!important;background:rgba(2,14,34,.82)!important;border:1px solid rgba(0,231,255,.35)!important;color:#fff!important;box-shadow:0 12px 28px rgba(0,0,0,.35)!important}@keyframes czModalFadeIn{from{opacity:0}to{opacity:1}}@keyframes czModalPop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.wallet-modal-section{animation:czModalFadeIn .22s ease both!important;backdrop-filter:none!important;background:rgba(0,5,18,.86)!important}.wallet-modal-section>.section-head{position:relative!important;z-index:2!important}.modal-close-page{background:linear-gradient(180deg,#153a79,#061b3f)!important;border:1px solid rgba(0,231,255,.45)!important;color:#fff!important;box-shadow:0 10px 24px rgba(0,0,0,.32),0 0 18px rgba(0,231,255,.12)!important}.modal-close-page:hover{filter:brightness(1.15)!important;transform:translateY(-1px)!important}
.jackpot-card{overflow:hidden!important}.jp-img.jackpot-gif{position:relative!important;min-height:180px!important;border-radius:22px!important;overflow:hidden!important;background-color:#020b1d!important;background-image:url('https://cdn.zabbet.com/JG8U/highlight/1725948738165-4cb4f1ec-44ed-4b21-99ed-398fbb6d7b25.gif')!important;background-size:108% auto!important;background-repeat:no-repeat!important;background-position:center center!important;border:1px solid rgba(255,224,122,.32)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 30px rgba(0,231,255,.12)!important;animation:jackpotFade 4.4s ease-in-out infinite!important}.jp-img.jackpot-gif:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(0,231,255,.15),transparent 38%),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.16));pointer-events:none!important;z-index:1!important}.jp-img.jackpot-gif>div{position:absolute!important;inset:0!important;z-index:2!important;display:grid!important;place-items:center!important;padding:24px 10px 0!important;text-align:center!important;background:transparent!important}.jp-img.jackpot-gif b{font-size:clamp(30px,3.2vw,42px)!important;line-height:1!important;letter-spacing:1.2px!important;color:#f2ffff!important;text-shadow:0 0 8px #fff,0 0 20px rgba(0,231,255,.95),0 4px 12px rgba(0,0,0,.82)!important;animation:jackpotNumberPulse 2.2s ease-in-out infinite!important}.jp-img.jackpot-gif small{display:none!important}@keyframes jackpotFade{0%,100%{opacity:.88;filter:saturate(1.04) brightness(.94)}50%{opacity:1;filter:saturate(1.2) brightness(1.18)}}@keyframes jackpotNumberPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.provider-grid,.game-grid{align-items:stretch!important}.provider-card{display:block!important;padding:0!important;min-height:0!important;aspect-ratio:1/1!important;overflow:hidden!important;border-radius:22px!important;background:#020b1d!important;isolation:isolate!important}.game-card{display:block!important;padding:0!important;min-height:0!important;aspect-ratio:16/9!important;overflow:hidden!important;border-radius:8px!important;background:#020b1d!important;isolation:isolate!important}.provider-logo,.game-thumb{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:inherit!important;background:#020b1d!important;display:grid!important;place-items:center!important;overflow:hidden!important}.provider-logo img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;padding:0!important;margin:0!important;background:#020b1d!important;transform:none!important;filter:none!important}.game-thumb img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;padding:0!important;margin:0!important;background:#020b1d!important;transform:none!important;filter:none!important}.provider-card:hover .provider-logo img,.game-card:hover .game-thumb img{transform:none!important;filter:none!important}.provider-badge,.game-badge{position:absolute!important;z-index:5!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;white-space:nowrap!important}.provider-meta,.game-info,.provider-count,.game-count-note{display:none!important}.provider-logo i,.game-thumb i{font-size:38px!important;color:#13eaff!important;text-shadow:0 0 16px rgba(0,231,255,.5)!important}
@media(max-width:1023px){.jp-img.jackpot-gif{min-height:170px!important;background-size:112% auto!important}}@media(max-width:767px){.auth-modal.has-side .modal-head{display:flex!important}.jp-img.jackpot-gif{min-height:148px!important;background-size:116% auto!important;border-radius:18px!important}.jp-img.jackpot-gif b{font-size:clamp(25px,7vw,32px)!important}.provider-card{border-radius:15px!important}.game-card{border-radius:8px!important}.provider-badge,.game-badge{top:6px!important;right:6px!important;font-size:9px!important;padding:4px 7px!important}}

/* ==========================================================
   v27 FINAL MOBILE MODAL + JACKPOT ALIGNMENT PATCH
   ========================================================== */
.modal,.wallet-modal-section{-webkit-overflow-scrolling:touch!important;touch-action:auto!important}
.modal.show{z-index:9000!important;display:flex!important;align-items:center!important;justify-content:center!important}
.modal .modal-card{position:relative!important;z-index:9002!important;pointer-events:auto!important}
.modal-head{position:sticky!important;top:0!important;z-index:9010!important;background:linear-gradient(90deg,rgba(4,25,58,.98),rgba(2,12,30,.98))!important}
.close-btn,.modal-close-page,[data-close-modal]{min-width:48px!important;min-height:48px!important;width:48px!important;height:48px!important;border-radius:16px!important;position:relative!important;z-index:99999!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;display:inline-grid!important;place-items:center!important;cursor:pointer!important;background:linear-gradient(180deg,rgba(15,54,104,.96),rgba(2,14,34,.96))!important;border:1px solid rgba(0,231,255,.42)!important;color:#fff!important;box-shadow:0 12px 26px rgba(0,0,0,.35),0 0 18px rgba(0,231,255,.14)!important}
.close-btn i,.modal-close-page i{pointer-events:none!important;font-size:22px!important;line-height:1!important}.close-btn:active,.modal-close-page:active{transform:scale(.94)!important;filter:brightness(1.25)!important}
.auth-modal.has-side .modal-card{overflow:hidden!important;border-radius:24px!important;border:1px solid rgba(0,231,255,.35)!important;box-shadow:0 30px 90px rgba(0,0,0,.78),0 0 38px rgba(0,231,255,.12)!important}.auth-modal.has-side .modal-card-inner{min-width:0!important;background:linear-gradient(180deg,rgba(8,35,80,.98),rgba(2,10,27,.98))!important}.auth-modal.has-side .modal-head{height:66px!important;padding:0 18px 0 24px!important;border-bottom:1px solid rgba(0,231,255,.22)!important;border-radius:24px 24px 0 0!important}.auth-modal.has-side .modal-head h3{font-size:22px!important;letter-spacing:-.3px!important}
.auth-tabs{padding:8px!important;gap:8px!important;background:rgba(1,9,24,.72)!important;border-radius:0!important}.auth-tab{height:54px!important;border-radius:16px!important;border:1px solid rgba(122,169,232,.18)!important;background:rgba(5,22,52,.8)!important}.auth-tab.active{background:linear-gradient(180deg,#25e8ff,#027bd9)!important;color:#fff!important;box-shadow:0 8px 24px rgba(0,180,255,.34)!important;border-color:rgba(255,255,255,.22)!important}
.auth-content{padding:22px!important}.auth-content h2{font-size:23px!important;margin:6px 0 18px!important;text-align:center!important}.step-line{height:7px!important;margin:0 0 18px!important;background:rgba(255,255,255,.1)!important}.step-section{min-height:58px!important;padding:10px 12px!important;border-radius:18px!important;background:rgba(1,10,28,.34)!important;border:1px solid rgba(124,168,230,.14)!important;margin-bottom:10px!important;font-size:16px!important}.step-section .stepno{width:40px!important;height:40px!important;flex:0 0 40px!important}.step-divider{margin:10px 0!important;border-top-color:rgba(255,255,255,.1)!important}.step-collapse{padding:0!important}.form-grid{gap:12px!important}.input,.input-wrap .input,#bankPickBtn{height:56px!important;border-radius:16px!important;background:rgba(1,9,24,.78)!important;border:1px solid rgba(130,172,230,.28)!important;font-size:15px!important}.input:focus{border-color:#24e8ff!important;box-shadow:0 0 0 3px rgba(36,232,255,.13)!important}.input-eye{right:12px!important;width:42px!important;height:42px!important;border-radius:14px!important}.gender-row{gap:10px!important}.radio,.terms-row{border:1px solid rgba(130,172,230,.18)!important;background:rgba(1,9,24,.42)!important;border-radius:14px!important;padding:12px!important}.btn-submit{height:56px!important;border-radius:16px!important;margin-top:16px!important}.help-text{margin-top:14px!important}
.jp-img.jackpot-gif>div{padding:0 10px 30px!important;align-items:center!important;justify-items:center!important}.jp-img.jackpot-gif b{display:inline-block!important;transform:translateY(-14px)!important;font-size:clamp(32px,3.8vw,48px)!important;line-height:.95!important}.jp-img.jackpot-gif b.jp-num-fade{animation:jpNumberFadeV27 .58s ease both!important}@keyframes jpNumberFadeV27{0%{opacity:.12;transform:translateY(-2px) scale(.96);filter:blur(2px)}45%{opacity:1;transform:translateY(-16px) scale(1.035);filter:blur(0)}100%{opacity:1;transform:translateY(-14px) scale(1);filter:blur(0)}}
@media (min-width:1024px){.auth-modal.has-side .modal-card{grid-template-columns:.88fr 1.12fr!important;width:min(1040px,94vw)!important}.auth-modal.has-side .auth-side{min-height:610px!important;border-radius:24px 0 0 24px!important}.auth-modal.has-side .modal-head{border-radius:0!important}.auth-content{padding:24px 30px 30px!important}}
@media (max-width:767px){.modal{padding:10px!important;align-items:flex-start!important;padding-top:calc(env(safe-area-inset-top,0px) + 12px)!important}.modal .modal-card{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 28px)!important;border-radius:22px!important}.auth-modal.has-side .modal-card{border-radius:22px!important}.auth-modal.has-side .modal-head{height:62px!important;border-radius:22px 22px 0 0!important;padding:0 12px 0 18px!important}.auth-modal.has-side .modal-head h3{font-size:22px!important}.auth-tabs{padding:6px!important;gap:6px!important}.auth-tab{height:50px!important;font-size:15px!important;border-radius:14px!important}.auth-content{padding:16px 16px 22px!important}.auth-content h2{font-size:21px!important;margin:4px 0 14px!important}.step-section{min-height:54px!important;font-size:15px!important;padding:8px 10px!important}.step-section .stepno{width:36px!important;height:36px!important;flex-basis:36px!important}.form-grid{grid-template-columns:1fr!important;gap:10px!important}.input,.input-wrap .input,#bankPickBtn{height:54px!important;border-radius:15px!important}label{margin:10px 0 6px!important}.gender-row{grid-template-columns:1fr 1fr!important}.close-btn,.modal-close-page,[data-close-modal]{min-width:52px!important;min-height:52px!important;width:52px!important;height:52px!important;border-radius:17px!important}.wallet-modal-section{z-index:8500!important;padding:10px!important;padding-top:calc(env(safe-area-inset-top,0px) + 10px)!important}.wallet-modal-section>.section-head{position:sticky!important;top:8px!important;z-index:9999!important;margin-top:0!important}.jp-img.jackpot-gif{min-height:178px!important;background-size:122% auto!important;background-position:center center!important}.jp-img.jackpot-gif>div{padding-bottom:38px!important}.jp-img.jackpot-gif b{font-size:clamp(28px,8vw,38px)!important;transform:translateY(-18px)!important}@keyframes jpNumberFadeV27{0%{opacity:.12;transform:translateY(-6px) scale(.96);filter:blur(2px)}45%{opacity:1;transform:translateY(-20px) scale(1.035);filter:blur(0)}100%{opacity:1;transform:translateY(-18px) scale(1);filter:blur(0)}}}

/* ============================================================
   v28 hotfix: register step badge + jackpot number lower position
   ============================================================ */
.step-section .stepno,
.step-section .stepno.empty{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  min-width:40px!important;
  border-radius:999px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:#fff!important;
  color:#001633!important;
  border:0!important;
  font-weight:1000!important;
  font-size:15px!important;
  line-height:1!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
}
.jp-img.jackpot-gif>div{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  bottom:auto!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 9.5%!important;
  transform:translateY(-30%)!important;
  text-align:center!important;
  pointer-events:none!important;
}
.jp-img.jackpot-gif b,
.jp-img.jackpot-gif b.jp-num-fade{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  transform:none!important;
  margin:0!important;
  white-space:nowrap!important;
  text-align:center!important;
  line-height:.9!important;
  letter-spacing:.5px!important;
  font-size:clamp(29px,3.55vw,45px)!important;
  animation:jackpotNumberPulse 2.2s ease-in-out infinite!important;
}
.jp-img.jackpot-gif b.jp-num-fade{animation:jpNumberFadeV28 .58s ease both!important}
@keyframes jpNumberFadeV28{
  0%{opacity:.12;transform:translateY(8px) scale(.96);filter:blur(2px)}
  45%{opacity:1;transform:translateY(0) scale(1.025);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media (max-width:767px){
  .step-section .stepno,
  .step-section .stepno.empty{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
    min-width:36px!important;
    font-size:14px!important;
  }
  .jp-img.jackpot-gif>div{
    top:51%!important;
    padding:0 7.2%!important;
    transform:translateY(-27%)!important;
  }
  .jp-img.jackpot-gif b,
  .jp-img.jackpot-gif b.jp-num-fade{
    transform:none!important;
    font-size:clamp(28px,8.2vw,37px)!important;
    letter-spacing:.2px!important;
  }
}

/* ============================================================
   v29 FINAL HOTFIX
   - iPhone/mobile modal X close tap reliability
   - Jackpot number normal font + raised slightly inside GIF frame
   ============================================================ */
html.modal-touch-lock,
body.modal-touch-lock{
  touch-action:auto!important;
}
.modal.show,
.wallet-modal-section{
  pointer-events:auto!important;
}
.modal .modal-head,
.wallet-modal-section>.section-head,
.modalized-head{
  pointer-events:auto!important;
  isolation:isolate!important;
}
.modal .close-btn,
.close-btn[data-close-modal],
.modal-close-page,
[data-close-modal],
[data-close-page]{
  position:relative!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(0,231,255,.22)!important;
  cursor:pointer!important;
  user-select:none!important;
}
.close-btn::before,
.modal-close-page::before,
[data-close-modal]::before,
[data-close-page]::before{
  content:""!important;
  position:absolute!important;
  inset:-14px!important;
  z-index:-1!important;
  border-radius:24px!important;
  pointer-events:auto!important;
}
.modal .modal-card{
  position:relative!important;
  z-index:20001!important;
}
.wallet-modal-section>.section-head{
  z-index:20002!important;
}
.modalized-head .modal-close-page{
  margin-left:auto!important;
}

/* Jackpot number: normal font, clear text, lifted slightly into the black-marked frame */
.jp-img.jackpot-gif>div{
  top:50%!important;
  transform:translateY(-34%)!important;
  padding-left:8.6%!important;
  padding-right:8.6%!important;
}
.jp-img.jackpot-gif b,
.jp-img.jackpot-gif b.jp-num-fade,
#jpVal,
.jp-mobile-val{
  font-family:Arial, Helvetica, 'Noto Sans Thai', sans-serif!important;
  font-weight:800!important;
  font-style:normal!important;
  color:#ffffff!important;
  opacity:.96!important;
  filter:none!important;
  text-shadow:0 2px 6px rgba(0,0,0,.72),0 0 6px rgba(255,255,255,.38)!important;
  letter-spacing:.2px!important;
  line-height:1!important;
}
.jp-img.jackpot-gif b.jp-num-fade{animation:jpNumberFadeV29 .46s ease both!important}
@keyframes jpNumberFadeV29{
  0%{opacity:.22;transform:translateY(4px) scale(.985);filter:none}
  55%{opacity:1;transform:translateY(0) scale(1.01);filter:none}
  100%{opacity:.96;transform:translateY(0) scale(1);filter:none}
}
@media (max-width:767px){
  .modal .close-btn,
  .close-btn[data-close-modal],
  .modal-close-page,
  [data-close-modal],
  [data-close-page]{
    min-width:56px!important;
    min-height:56px!important;
    width:56px!important;
    height:56px!important;
  }
  .jp-img.jackpot-gif>div{
    top:50%!important;
    transform:translateY(-36%)!important;
    padding-left:7.8%!important;
    padding-right:7.8%!important;
  }
  .jp-img.jackpot-gif b,
  .jp-img.jackpot-gif b.jp-num-fade,
  #jpVal,
  .jp-mobile-val{
    font-size:clamp(27px,8vw,36px)!important;
    letter-spacing:0!important;
  }
}

/* ========================================================================== 
   RB PATCH: DESKTOP NAVBAR POLISH v2026-04-28
   เป้าหมาย: ปรับ Navbar บนคอมให้บาลานซ์ขึ้น โดยไม่ตัดโค้ดเดิม
   - จัด topbar ให้เรียงสวย ไม่เบียด
   - ปรับโซนสมาชิกหลังล็อกอินให้ขนาดพอดี
   - ปรับแถบหมวดหมู่ให้เป็นเมนูแนวนอนที่อ่านง่าย
   ========================================================================== */

@media (min-width:1024px){
  :root{
    --rb-nav-h:74px;
    --rb-cat-h:70px;
    --rb-nav-radius:10px;
    --rb-nav-cyan:#00e7ff;
    --rb-nav-gold-1:#fff0a8;
    --rb-nav-gold-2:#f3c45d;
    --rb-nav-gold-3:#c9861d;
  }

  .app-install{
    display:none!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    width:100%!important;
    background:linear-gradient(180deg,rgba(2,13,33,.98),rgba(1,8,23,.98))!important;
    border-bottom:1px solid rgba(0,231,255,.18)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.30)!important;
    backdrop-filter:blur(16px)!important;
  }

  .topbar-inner{
    width:100%!important;
    max-width:1440px!important;
    height:var(--rb-nav-h)!important;
    min-height:var(--rb-nav-h)!important;
    margin:0 auto!important;
    padding:0 18px!important;
    display:grid!important;
    grid-template-columns:minmax(360px,auto) minmax(0,1fr)!important;
    align-items:center!important;
    gap:16px!important;
    box-sizing:border-box!important;
  }

  .topbar .icon-btn{
    display:none!important;
  }

  .topbar .logo{
    justify-self:start!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }

  .topbar .logo a{
    display:inline-flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }

  .topbar .logo .brand-logo,
  .brand-logo{
    height:44px!important;
    min-width:158px!important;
    max-width:178px!important;
    padding:0 18px!important;
    border-radius:10px!important;
    font-size:24px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    color:#fff!important;
    text-shadow:0 2px 0 rgba(0,75,105,.55),0 0 14px rgba(0,231,255,.45)!important;
    background:linear-gradient(180deg,rgba(35,218,255,.96),rgba(0,126,220,.96))!important;
    border:1px solid rgba(124,239,255,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(0,231,255,.24)!important;
    clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)!important;
  }

  .topbar .logo .brand-logo:before,
  .topbar .logo .brand-logo:after,
  .brand-logo:before,
  .brand-logo:after{
    display:none!important;
  }

  .topbar .flag-btn{
    display:none!important;
  }

  .desktop-search-btn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    padding:0!important;
    border-radius:10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#dffbff!important;
    font-size:17px!important;
    background:linear-gradient(180deg,rgba(9,44,98,.96),rgba(3,21,57,.98))!important;
    border:1px solid rgba(0,153,255,.48)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 16px rgba(0,0,0,.18)!important;
  }

  .desktop-promo-btn{
    height:44px!important;
    min-width:132px!important;
    padding:0 15px!important;
    border-radius:10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    background:linear-gradient(180deg,rgba(10,39,84,.96),rgba(5,19,48,.98))!important;
    border:1px solid rgba(244,203,100,.70)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px rgba(0,0,0,.20)!important;
  }

  .desktop-promo-btn .gicon{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    border-radius:8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#231604!important;
    background:linear-gradient(180deg,var(--rb-nav-gold-1),var(--rb-nav-gold-3))!important;
  }

  .top-right-block{
    justify-self:end!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .desktop-auth{
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
  }

  .desktop-auth .btn-login,
  .desktop-auth .btn-register,
  .btn-login,
  .btn-register{
    height:44px!important;
    min-width:142px!important;
    padding:0 18px!important;
    border-radius:10px!important;
    font-family:'Noto Sans Thai',system-ui,sans-serif!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .desktop-auth .btn-login,
  .btn-login{
    color:#241605!important;
    border:1px solid rgba(255,235,150,.98)!important;
    background:linear-gradient(180deg,var(--rb-nav-gold-1) 0%,var(--rb-nav-gold-2) 48%,var(--rb-nav-gold-3) 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(107,65,4,.35),0 8px 18px rgba(214,153,32,.22)!important;
  }

  .desktop-auth .btn-register,
  .btn-register{
    color:#fff!important;
    border:0!important;
    background:linear-gradient(180deg,#40f4ff 0%,#0487ff 52%,#0459d6 100%)!important;
    box-shadow:0 12px 26px rgba(0,145,255,.28),inset 0 1px 0 rgba(255,255,255,.34)!important;
    text-shadow:0 1px 8px rgba(0,0,0,.28)!important;
  }

  .desktop-auth.is-user{
    gap:8px!important;
    align-items:center!important;
    justify-content:flex-end!important;
    max-width:100%!important;
    flex-wrap:nowrap!important;
  }

  /* User pill — avatar + name, compact */
  .top-user-pill{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    height:42px!important;
    padding:0 14px 0 6px!important;
    background:linear-gradient(180deg,rgba(14,49,100,.96),rgba(5,18,40,.96))!important;
    border:1px solid rgba(74,142,225,.45)!important;
    border-radius:21px!important;
    cursor:pointer!important;
    color:#dceeff!important;
    font-size:13px!important;
    font-weight:800!important;
    max-width:160px!important;
    flex:0 0 auto!important;
    box-sizing:border-box!important;
    transition:.15s!important;
  }
  .top-user-pill .top-avatar{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border-radius:50%!important;
    font-size:13px!important;
  }
  .top-uname{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    max-width:108px!important;
  }

  /* Balance chip */
  .desktop-auth.is-user .top-balance-card{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    height:42px!important;
    padding:0 14px!important;
    background:rgba(0,7,22,.72)!important;
    border:1px solid rgba(0,231,255,.30)!important;
    border-radius:21px!important;
    cursor:pointer!important;
    flex:0 0 auto!important;
    transition:.15s!important;
  }
  .desktop-auth.is-user .top-balance-card i{
    color:var(--cz-cyan)!important;
    font-size:13px!important;
  }
  .desktop-auth.is-user .top-balance-card b{
    font-size:14px!important;
    font-weight:900!important;
    color:#fff!important;
    white-space:nowrap!important;
  }

  /* Action buttons */
  .top-action{
    height:42px!important;
    min-width:74px!important;
    padding:0 14px!important;
    border-radius:21px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    font-size:13px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
    transition:.15s!important;
  }
  .top-action.deposit{
    color:#fff!important;
    background:linear-gradient(180deg,#21e8ff,#008bd8)!important;
    border:0!important;
  }
  .top-action.withdraw{
    color:#201100!important;
    background:linear-gradient(180deg,var(--rb-nav-gold-1),var(--rb-nav-gold-3))!important;
    border:0!important;
  }

  /* Logout */
  .top-logout{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#b8c9e7!important;
    background:rgba(3,11,26,.72)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    flex:0 0 auto!important;
    transition:.15s!important;
  }

  .desktop-search-btn:hover,
  .desktop-promo-btn:hover,
  .desktop-auth .btn-login:hover,
  .desktop-auth .btn-register:hover,
  .top-action:hover,
  .top-logout:hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.06)!important;
  }

  .cat-tabs{
    position:sticky!important;
    top:var(--rb-nav-h)!important;
    z-index:110!important;
    display:block!important;
    width:100%!important;
    background:linear-gradient(180deg,rgba(2,12,32,.98),rgba(1,8,22,.98))!important;
    border-bottom:1px solid rgba(0,231,255,.16)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(14px)!important;
  }

  .cat-tabs-inner{
    width:100%!important;
    max-width:1440px!important;
    height:var(--rb-cat-h)!important;
    min-height:var(--rb-cat-h)!important;
    margin:0 auto!important;
    padding:9px 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    box-sizing:border-box!important;
    scrollbar-width:thin!important;
  }

  .cat-tabs-inner::-webkit-scrollbar{height:5px!important}
  .cat-tabs-inner::-webkit-scrollbar-thumb{background:rgba(0,231,255,.30)!important;border-radius:10px!important}

  .cat-tab{
    height:48px!important;
    min-width:118px!important;
    padding:0 16px!important;
    border-radius:10px!important;
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    color:#d2f3ff!important;
    font-size:14px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    background:linear-gradient(180deg,rgba(6,25,58,.94),rgba(2,13,34,.96))!important;
    border:1px solid rgba(0,231,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.14)!important;
  }

  .cat-tab i{
    font-size:17px!important;
    color:var(--rb-nav-cyan)!important;
    text-shadow:0 0 12px rgba(0,231,255,.45)!important;
  }

  .cat-tab:hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.08)!important;
    border-color:rgba(0,231,255,.42)!important;
  }

  .cat-tab.active{
    color:#fff!important;
    background:linear-gradient(180deg,rgba(0,210,255,.24),rgba(0,92,184,.22)),linear-gradient(180deg,rgba(7,39,85,.98),rgba(3,20,53,.98))!important;
    border-color:rgba(0,231,255,.78)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,231,255,.10),0 0 18px rgba(0,231,255,.20)!important;
  }

  .cat-tab .live-dot{
    width:8px!important;
    height:8px!important;
    min-width:8px!important;
    border-radius:50%!important;
    background:#ff3b55!important;
    box-shadow:0 0 10px rgba(255,59,85,.85)!important;
  }

  .desktop-side,
  .right-sidebar{
    top:calc(var(--rb-nav-h) + var(--rb-cat-h) + 18px)!important;
  }
}

@media (min-width:1024px) and (max-width:1180px){
  .topbar-inner{
    grid-template-columns:minmax(310px,auto) minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 12px!important;
  }

  .topbar .logo{
    gap:8px!important;
  }

  .topbar .logo .brand-logo,
  .brand-logo{
    min-width:138px!important;
    max-width:150px!important;
    height:42px!important;
    font-size:21px!important;
    padding:0 14px!important;
  }

  .desktop-search-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  .desktop-promo-btn{
    min-width:112px!important;
    height:42px!important;
    padding:0 12px!important;
  }

  .top-uname{
    display:none!important;
  }
  .top-action{
    min-width:64px!important;
    padding:0 11px!important;
    font-size:12px!important;
  }

  .desktop-auth .btn-login,
  .desktop-auth .btn-register,
  .btn-login,
  .btn-register{
    min-width:118px!important;
    height:42px!important;
    padding:0 14px!important;
  }

  .cat-tabs-inner{
    justify-content:flex-start!important;
    gap:8px!important;
    padding:9px 12px!important;
  }

  .cat-tab{
    min-width:106px!important;
    height:46px!important;
    padding:0 13px!important;
    font-size:13.5px!important;
  }
}

@media (max-width:1023px){
  .topbar{
    top:0!important;
  }

  .topbar-inner{
    min-height:60px!important;
    height:60px!important;
  }

  .cat-tabs{
    display:none!important;
  }
}

.brand-logo.brand-logo-image{
  padding:4px 14px!important;
}
.brand-logo.brand-logo-image img{
  display:block;
  max-width:128px;
  max-height:34px;
  object-fit:contain;
}

/* ============================================================
   v30 — PUBLIC PLAYER SIDEBAR + BOTTOM NAV REDESIGN
   เป้าหมาย: sidebar ซ้ายสะอาด เรียบร้อย อ่านง่าย
   Drawer มือถือสวยขึ้น — Bottom Nav เด่นชัดขึ้น
   ============================================================ */

/* ---- Desktop Left Sidebar Container ---- */
@media (min-width:1024px){
  .desktop-side{
    position:sticky!important;
    top:calc(var(--rb-nav-h,74px) + 70px + 18px)!important;
    align-self:start!important;
  }

  .side-card{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  /* ---- Rail Account Card (logged in) ---- */
  .rail-account{
    border-radius:10px!important;
    padding:12px!important;
    border:1px solid rgba(0,231,255,.16)!important;
    background:linear-gradient(180deg,rgba(6,28,66,.9),rgba(2,10,26,.96))!important;
    box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
  }

  /* ---- Rail Balance ---- */
  .rail-balance{
    border-radius:8px!important;
    padding:9px 11px!important;
    margin:9px 0!important;
    background:rgba(0,5,18,.56)!important;
    border:1px solid rgba(0,231,255,.16)!important;
  }

  /* ---- Rail Nav Links ---- */
  .rail-link{
    height:auto!important;
    min-height:54px!important;
    border-radius:8px!important;
    padding:10px 14px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    font-size:13.5px!important;
    font-weight:900!important;
    color:#cce0ff!important;
    border:1px solid rgba(0,231,255,.14)!important;
    background:linear-gradient(180deg,rgba(7,32,72,.86),rgba(2,11,26,.92))!important;
    box-shadow:0 6px 18px rgba(0,0,0,.22)!important;
    transition:transform .15s,border-color .15s,background .15s,box-shadow .15s!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  .rail-link:hover{
    transform:translateY(-2px)!important;
    border-color:rgba(0,231,255,.36)!important;
    background:linear-gradient(180deg,rgba(0,50,110,.88),rgba(2,14,36,.94))!important;
    box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 18px rgba(0,231,255,.08)!important;
    color:#fff!important;
  }
  .rail-link .ricon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:7px!important;
    background:linear-gradient(180deg,rgba(0,231,255,.14),rgba(0,93,220,.1))!important;
    border:1px solid rgba(0,231,255,.2)!important;
    color:var(--cz-cyan)!important;
    font-size:16px!important;
    display:grid!important;
    place-items:center!important;
    flex-shrink:0!important;
    box-shadow:0 0 12px rgba(0,231,255,.1)!important;
    transition:background .15s!important;
  }
  .rail-link:hover .ricon{
    background:linear-gradient(180deg,rgba(0,231,255,.22),rgba(0,93,220,.16))!important;
  }
  .rail-text{
    flex:1!important;
    font-size:13px!important;
    font-weight:900!important;
    letter-spacing:-.01em!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:block!important;
  }
  .rail-link.active{
    background:linear-gradient(135deg,rgba(0,231,255,.2),rgba(0,94,200,.14))!important;
    border-color:rgba(0,231,255,.52)!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(0,150,255,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
  }
  .rail-link.active .ricon{
    background:linear-gradient(180deg,#20e8ff,#0880e8)!important;
    color:#fff!important;
    box-shadow:0 0 16px rgba(0,231,255,.35)!important;
    border-color:transparent!important;
  }

  /* Rail Quick action buttons */
  .rail-quick{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:6px!important;
  }
  .rail-quick button{
    height:38px!important;
    border-radius:8px!important;
    font-size:12.5px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
}

/* ---- Mobile Drawer container ---- */
.drawer{
  width:min(300px,86vw)!important;
  background:linear-gradient(180deg,#02112e,#010810)!important;
  border-right:1px solid rgba(0,231,255,.15)!important;
  box-shadow:16px 0 48px rgba(0,0,0,.52)!important;
  display:flex!important;
  flex-direction:column!important;
}
.drawer-head{
  padding:14px 16px!important;
  border-bottom:1px solid rgba(0,231,255,.12)!important;
  background:linear-gradient(90deg,rgba(0,50,110,.22),transparent)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-shrink:0!important;
}
.drawer-head .brand-logo{
  height:36px!important;
  min-width:110px!important;
  font-size:17px!important;
}
/* scope close btn only inside drawer to avoid affecting modals */
.drawer .close-btn{
  width:36px!important;
  height:36px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:#c8deff!important;
}
.drawer .side-card{
  padding:12px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  overflow-y:auto!important;
  flex:1!important;
}

/* ---- Guest box (ก่อนล็อกอิน) ---- */
/* modals.css line 118 sets .guest-box i as 72px circles — reset ALL i descendants */
.guest-box i{
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  border:0!important;
  display:inline!important;
  margin:0!important;
  font-size:inherit!important;
  color:inherit!important;
}
.guest-box{
  padding:18px 14px 16px!important;
  text-align:center!important;
  border-bottom:1px solid rgba(0,231,255,.1)!important;
  margin-bottom:6px!important;
  background:none!important;
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
}
/* Top shield icon — direct child only */
.guest-box > i{
  font-size:32px!important;
  color:var(--cz-cyan)!important;
  opacity:.7!important;
  display:block!important;
  margin:0 auto 12px!important;
}
.guest-box h3{
  margin:0 0 6px!important;
  font-size:15px!important;
  font-weight:900!important;
  color:#dceeff!important;
}
.guest-box p{
  color:#7a9cc2!important;
  font-size:12px!important;
  margin:0 0 14px!important;
  line-height:1.5!important;
}
.guest-box .btn-main{
  width:100%!important;
  margin-bottom:8px!important;
  border-radius:8px!important;
  height:44px!important;
  font-size:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.guest-box .btn-dark{
  width:100%!important;
  border-radius:8px!important;
  height:44px!important;
  font-size:14px!important;
  border:1px solid rgba(0,231,255,.28)!important;
  background:rgba(4,20,52,.7)!important;
  color:#c8e0ff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}

/* ---- Drawer profile (หลังล็อกอิน) ---- */
.drawer-profile{
  padding:12px 0!important;
  border-bottom:1px solid rgba(0,231,255,.1)!important;
  margin-bottom:4px!important;
}
.drawer-profile-top{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
.drawer-avatar{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#30e8ff,#0870ff)!important;
  font-size:18px!important;
  display:grid!important;
  place-items:center!important;
  flex-shrink:0!important;
}
.drawer-profile-info b{
  font-size:14px!important;
  color:#dceeff!important;
  display:block!important;
  font-weight:900!important;
}
.drawer-profile-info small{color:#7a9cc2!important;font-size:11px!important}
.drawer-balance-row{
  border-radius:8px!important;
  padding:9px 12px!important;
  background:rgba(0,5,18,.55)!important;
  border:1px solid rgba(0,231,255,.14)!important;
  margin-bottom:8px!important;
}
.drawer-quick{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin-bottom:8px!important;
}
.drawer-quick button{
  height:40px!important;
  border-radius:8px!important;
  font-size:13px!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:0!important;
}
.drawer-quick button:first-child{
  background:linear-gradient(180deg,#30e8ff,#0870ff)!important;
  color:#fff!important;
}
.drawer-quick button:last-child{
  background:linear-gradient(180deg,#ffe07b,#ffb331)!important;
  color:#160b00!important;
}

/* ---- Drawer Nav (ทั้งก่อน/หลังล็อกอิน) ---- */
.drawer-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.drawer-nav-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px 12px!important;
  border-radius:8px!important;
  border:1px solid rgba(0,231,255,.1)!important;
  background:rgba(4,18,46,.5)!important;
  font-size:13.5px!important;
  font-weight:900!important;
  color:#b8d4f2!important;
  cursor:pointer!important;
  text-decoration:none!important;
  transition:background .14s,border-color .14s,color .14s!important;
}
.drawer-nav-item:hover{
  background:rgba(0,36,84,.75)!important;
  border-color:rgba(0,231,255,.28)!important;
  color:#fff!important;
}
/* Icon — inline ไม่ใช่ box ให้ใช้สีอย่างเดียว */
.drawer-nav-item i{
  width:20px!important;
  text-align:center!important;
  font-size:15px!important;
  color:var(--cz-cyan)!important;
  flex-shrink:0!important;
}
.drawer-nav-item.active{
  background:rgba(0,231,255,.1)!important;
  border-color:rgba(0,231,255,.35)!important;
  color:#fff!important;
}
.drawer-nav-item.active i{color:#fff!important}

/* Logout buttons */
.drawer-logout-btn{
  width:100%!important;
  margin-top:6px!important;
  height:40px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,70,70,.24)!important;
  background:rgba(40,5,5,.65)!important;
  color:#ffb0b0!important;
  font-size:13px!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  transition:.14s!important;
}
.drawer-logout-btn:hover{
  background:rgba(90,8,8,.8)!important;
  border-color:rgba(255,70,70,.45)!important;
}
.rail-account-logout{
  border-radius:8px!important;
  border:1px solid rgba(255,70,70,.2)!important;
  background:rgba(40,5,5,.55)!important;
  color:#ffb0b0!important;
  font-weight:900!important;
  font-size:12px!important;
}

/* btn-dark ใน drawer (ปุ่มออกจากระบบ plain) */
.drawer .btn-dark{
  border-radius:8px!important;
  margin-top:6px!important;
  height:40px!important;
  font-size:13px!important;
}

/* ---- Bottom Navigation Redesign ---- */
.bottom-nav{
  position:fixed!important;
  bottom:0!important;left:0!important;right:0!important;
  z-index:200!important;
  background:transparent!important;
  padding:0 0 env(safe-area-inset-bottom,0)!important;
}
.bottom-nav-inner{
  display:flex!important;
  align-items:stretch!important;
  margin:0 8px 8px!important;
  height:64px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(4,20,50,.97),rgba(1,8,20,.99))!important;
  border:1px solid rgba(0,231,255,.16)!important;
  box-shadow:0 -2px 0 rgba(0,0,0,.2),0 16px 40px rgba(0,0,0,.48)!important;
  backdrop-filter:blur(18px)!important;
  overflow:hidden!important;
  padding:5px 5px!important;
  gap:3px!important;
}
.nav-item{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  color:#7090b8!important;
  font-size:10px!important;
  font-weight:900!important;
  border:0!important;
  background:transparent!important;
  border-radius:10px!important;
  cursor:pointer!important;
  transition:color .14s,background .14s!important;
  padding:3px 0!important;
}
.nav-item:hover{color:#b8d4f2!important}
.nav-icon{
  width:32px!important;
  height:32px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(0,231,255,.08)!important;
  display:grid!important;
  place-items:center!important;
  font-size:15px!important;
  transition:background .14s,border-color .14s,box-shadow .14s!important;
}
.nav-item.active{color:#fff!important}
.nav-item.active .nav-icon{
  background:linear-gradient(180deg,#1ce6ff,#0464e0)!important;
  border-color:transparent!important;
  box-shadow:0 4px 14px rgba(0,160,255,.32),inset 0 1px 0 rgba(255,255,255,.28)!important;
  color:#fff!important;
}

@media (max-width:420px){
  .bottom-nav-inner{
    margin:0 5px 6px!important;
    height:60px!important;
    border-radius:12px!important;
    padding:4px 3px!important;
  }
  .nav-icon{
    width:28px!important;
    height:28px!important;
    border-radius:7px!important;
    font-size:14px!important;
  }
  .nav-item{font-size:9.5px!important}
}

/* ================================================================
   INPUT & BUTTON COLOR FIXES
   - Browser autofill overrides text to black → force white
   - btn-main / deposit-action: flex so icon+text align cleanly
   - deposit-method icon box: cyan color override
   ================================================================ */

/* Force white text on browser autofill (Chrome/Safari override) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #010c22 inset!important;
  box-shadow:0 0 0 1000px #010c22 inset!important;
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
}

/* Ensure all input/select/textarea text is visible white */
.input,input,select,textarea{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.input::placeholder,input::placeholder{
  color:rgba(140,170,210,.55)!important;
  -webkit-text-fill-color:rgba(140,170,210,.55)!important;
}
.input:focus,input:focus{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* btn-main + deposit-action: flex row so icon sits next to text */
.btn-main,
.deposit-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
/* Reset icon inside buttons — no box, just inline character */
.btn-main i,
.deposit-action i,
.btn-dark i,
.btn-gold i{
  display:inline!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  border:0!important;
  margin:0!important;
  font-size:inherit!important;
  color:inherit!important;
}
/* Withdraw button full-width fix */
#btnWithdraw{
  width:100%!important;
}

/* Deposit method icon box — restore proper styling */
.deposit-method i{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  background:rgba(0,231,255,.12)!important;
  border:1px solid rgba(0,231,255,.2)!important;
  display:grid!important;
  place-items:center!important;
  font-size:18px!important;
  color:var(--cz-cyan)!important;
  flex:0 0 auto!important;
}

/* =====================================================
   UI ENHANCEMENT PATCH
   ===================================================== */

/* --- Topbar balance pill --- */
.top-balance-pill{display:flex;align-items:center;gap:6px;background:rgba(0,7,22,.72);border:1px solid rgba(0,231,255,.42);border-radius:999px;padding:6px 16px;font-size:14px;font-weight:800;color:#00e7ff;cursor:pointer;transition:all .2s;white-space:nowrap}
.top-balance-pill:hover{background:rgba(0,231,255,.15);border-color:rgba(0,231,255,.8);box-shadow:0 0 20px rgba(0,231,255,.2)}
.top-balance-pill i{color:var(--cz-gold);filter:drop-shadow(0 0 8px rgba(255,214,107,.5));font-size:13px}
.top-right-block{display:flex;align-items:center;gap:10px}

/* --- Navbar deposit/withdraw highlight --- */
.sn-deposit{background:linear-gradient(180deg,rgba(0,231,255,.22),rgba(0,94,255,.12))!important;border:1px solid rgba(0,231,255,.5)!important;color:#00e7ff!important;font-weight:800!important}
.sn-deposit i{color:#00e7ff!important}
.sn-deposit:hover{background:linear-gradient(180deg,rgba(0,231,255,.34),rgba(0,94,255,.2))!important;box-shadow:0 0 18px rgba(0,231,255,.25)!important}
.sn-withdraw{background:linear-gradient(180deg,rgba(255,211,107,.18),rgba(255,160,40,.1))!important;border:1px solid rgba(255,214,107,.45)!important;color:var(--cz-gold)!important;font-weight:800!important}
.sn-withdraw i{color:var(--cz-gold)!important}
.sn-withdraw:hover{background:linear-gradient(180deg,rgba(255,211,107,.28),rgba(255,160,40,.18))!important;box-shadow:0 0 18px rgba(255,214,107,.2)!important}
.sn-line{background:linear-gradient(180deg,rgba(0,185,0,.22),rgba(0,130,0,.12))!important;border:1px solid rgba(0,195,0,.45)!important;color:#06c755!important;font-weight:800!important;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sn-line i{color:#06c755!important}

/* --- Game card hover overlay (play button) --- */
.game-thumb{position:relative;overflow:hidden}
.game-play-overlay{position:absolute;inset:0;background:rgba(0,5,20,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease;z-index:4;border-radius:inherit}
.game-card:hover .game-play-overlay{opacity:1}
.game-play-btn{background:linear-gradient(180deg,#40f4ff,#0487ff 52%,#0459d6);border:0;border-radius:999px;color:#fff;font-size:13px;font-weight:800;padding:10px 22px;cursor:pointer;box-shadow:0 0 28px rgba(0,231,255,.55),0 6px 18px rgba(0,0,0,.4);transform:scale(.85) translateY(6px);transition:transform .22s ease;font-family:inherit;white-space:nowrap}
.game-card:hover .game-play-btn{transform:scale(1) translateY(0)}
.game-play-btn i{margin-right:5px}

/* --- Game card size improvement --- */
.game-thumb{aspect-ratio:3/4!important}
@media(min-width:1024px){.game-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.game-thumb{aspect-ratio:3/4!important}}

/* --- Bottom nav enhancement --- */
.bottom-nav{box-shadow:0 -4px 32px rgba(0,0,0,.5)!important;height:72px}
.bottom-nav-inner{height:72px;padding:0 6px}
.nav-item{padding:8px 4px 6px;gap:3px;font-size:10px;font-weight:700}
.nav-icon{width:38px!important;height:38px!important;border-radius:14px!important;font-size:16px!important}
.nav-deposit .nav-icon{background:linear-gradient(180deg,#40f4ff,#0487ff)!important;color:#fff!important;box-shadow:0 0 18px rgba(0,231,255,.4),0 4px 12px rgba(0,0,0,.3)!important;border:0!important}
.nav-deposit{color:#00e7ff!important}
.nav-withdraw .nav-icon{background:linear-gradient(180deg,#ffe07b,#ffb331)!important;color:#160b00!important;box-shadow:0 0 18px rgba(255,179,49,.35),0 4px 12px rgba(0,0,0,.3)!important;border:0!important}
.nav-withdraw{color:var(--cz-gold)!important}
.nav-games-center .nav-icon-center{width:46px!important;height:46px!important;border-radius:50%!important;background:linear-gradient(180deg,#40f4ff,#0487ff 52%,#0459d6)!important;color:#fff!important;box-shadow:0 0 24px rgba(0,231,255,.55),0 6px 18px rgba(0,0,0,.35)!important;border:0!important;font-size:18px!important;margin-top:-10px}
.nav-games-center{color:#fff!important;margin-top:-4px}

/* --- Quick menu color per category --- */
.rb-quick-item span{width:42px!important;height:42px!important;border-radius:16px!important;font-size:18px!important;background:rgba(0,0,0,.3)!important;border-width:1px!important;border-style:solid!important}
.rb-quick-item b{font-size:13px!important}
.rb-quick-item small{font-size:10px!important;opacity:.8}

/* --- Hot games bar title glow --- */
.bar-title{font-size:15px!important;font-weight:900!important}
.bar-title i{font-size:16px!important}

/* --- Marquee announcement styling --- */
.notice{background:linear-gradient(90deg,rgba(0,231,255,.12),rgba(0,94,255,.08),rgba(0,231,255,.12))!important;border:1px solid rgba(0,231,255,.28)!important;border-radius:14px!important;padding:9px 14px!important;font-size:13px!important;font-weight:600;letter-spacing:.2px}
.notice marquee{color:#c9f3ff}

/* --- Drawer: history dropdown group --- */
.drawer-nav-group{display:flex!important;flex-direction:column!important;gap:0!important}
.drawer-nav-parent{justify-content:space-between!important}
.drawer-nav-arrow{font-size:11px!important;color:#9ebce5!important;transition:transform .2s!important}
.drawer-nav-children{display:flex;flex-direction:column;gap:3px;padding:4px 0 0 0}
.drawer-nav-child{
  padding-left:32px!important;
  font-size:12.5px!important;
  font-weight:700!important;
  color:#9ebce5!important;
  border-color:rgba(0,231,255,.06)!important;
  background:rgba(0,20,50,.4)!important;
}
.drawer-nav-child:hover{color:#fff!important;background:rgba(0,36,84,.6)!important}
.drawer-nav-child i{color:rgba(0,231,255,.6)!important;font-size:12px!important}

/* --- Desktop rail: history sub-links --- */
.rail-history-group{display:flex;flex-direction:column;gap:0}
.rail-link-parent{flex-direction:column!important}
.rail-history-sub{display:flex;flex-direction:column;gap:3px;padding:4px 4px 0}
.rail-sub-link{
  width:100%;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(0,231,255,.08);
  background:rgba(0,18,44,.5);
  color:#9ebce5;
  font-size:12px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .14s,color .14s;
}
.rail-sub-link i{color:rgba(0,231,255,.55);width:14px;text-align:center;font-size:11px}
.rail-sub-link:hover{background:rgba(0,36,84,.75);color:#fff}
.rail-sub-link:hover i{color:var(--cz-cyan)}