:root{--m-tabbar-h: 60px;--m-header-h: 52px;--m-radius: 12px;--m-radius-sm: 8px;--m-radius-lg: 16px;--m-gap: 10px;--m-padding: 12px}html,body{overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:"Inter",var(--font-sans);font-size:14px;line-height:1.5;min-height:100dvh;padding-bottom:var(--m-tabbar-h)}.m-app{display:flex;flex-direction:column;min-height:100dvh;max-width:480px;margin:0 auto;position:relative}.m-main{flex:1;padding-top:var(--m-header-h);display:flex;flex-direction:column;gap:16px}.m-section-pad{padding-left:var(--m-padding);padding-right:var(--m-padding)}.m-scroll-x{display:flex;gap:var(--m-gap);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-left:var(--m-padding);padding-right:var(--m-padding)}.m-scroll-x::-webkit-scrollbar{display:none}.m-scroll-x>*{scroll-snap-align:start;flex-shrink:0}.m-section-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--m-padding)}.m-section-title{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--text)}.m-section-title .material-symbols-rounded{font-size:18px}.m-section-link{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:500;color:var(--text3);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 10px 4px 12px;cursor:pointer;transition:color .2s,background .2s}.m-section-link:active{background:var(--surface2);color:var(--text2)}.m-section-link .material-symbols-rounded{font-size:14px}.m-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--m-header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m-padding);background:var(--bg);border-bottom:1px solid var(--border);max-width:480px;margin:0 auto;transition:box-shadow .25s}.m-header.scrolled{box-shadow:0 2px 16px #00000059}.m-header-logo{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);display:flex;align-items:center;gap:0}.m-header-logo span{color:var(--accent)}.m-header-actions{display:flex;align-items:center;gap:8px}.m-btn-login{padding:7px 16px;border-radius:var(--m-radius-sm);font-size:13px;font-weight:600;color:var(--text);background:var(--surface2);border:1px solid var(--border2);cursor:pointer;transition:background .2s}.m-btn-login:active{background:var(--surface3)}.m-btn-register{padding:7px 16px;border-radius:var(--m-radius-sm);font-size:13px;font-weight:600;color:var(--color-white);background:var(--color-green-600);border:none;cursor:pointer;transition:background .2s}.m-btn-register:active{background:var(--color-green-700)}.m-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:100;height:var(--m-tabbar-h);display:flex;align-items:stretch;background:var(--bg);border-top:1px solid var(--border);max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}.m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--text3);position:relative;transition:color .2s;-webkit-tap-highlight-color:transparent}.m-tab .material-symbols-rounded{font-size:22px;transition:transform .15s}.m-tab-label{font-size:10px;font-weight:500;line-height:1}.m-tab.active{color:var(--accent)}.m-tab.active .material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}.m-tab.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:20px;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}.m-tab:active .material-symbols-rounded{transform:scale(.9)}.m-banner-carousel{position:relative;padding:0 var(--m-padding)}.m-banner-track{display:flex;gap:var(--m-gap);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--m-radius-lg)}.m-banner-track::-webkit-scrollbar{display:none}.m-banner-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;border-radius:var(--m-radius-lg);overflow:hidden;aspect-ratio:16 / 9;background:var(--surface)}.m-banner-slide img{width:100%;height:100%;object-fit:cover;display:block}.m-banner-slide:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 60%,transparent 100%);pointer-events:none}.m-banner-content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}.m-banner-title{font-size:18px;font-weight:800;line-height:1.2;color:var(--color-white);margin-bottom:4px}.m-banner-sub{font-size:12px;color:#ffffffbf;line-height:1.3}.m-banner-dots{display:flex;justify-content:center;gap:6px;padding-top:10px}.m-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--surface3);transition:all .25s;cursor:pointer}.m-banner-dot.active{width:18px;border-radius:3px;background:var(--accent)}.m-promo-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-gap);padding:0 var(--m-padding)}.m-promo-card{position:relative;border-radius:var(--m-radius);overflow:hidden;background:var(--surface);aspect-ratio:1.4;cursor:pointer;transition:transform .15s}.m-promo-card:active{transform:scale(.97)}.m-promo-card img{width:100%;height:100%;object-fit:cover;display:block}.m-promo-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(0,0,0,.6) 0%,transparent 70%);display:flex;flex-direction:column;justify-content:flex-end;padding:10px}.m-promo-card-label{font-size:14px;font-weight:700;color:var(--color-white);line-height:1.2}.m-promo-card-sub{font-size:10px;color:#ffffffa6;margin-top:2px;line-height:1.3}.m-game-card{position:relative;border-radius:var(--m-radius);overflow:hidden;background:var(--surface);cursor:pointer;transition:transform .15s}.m-game-card:active{transform:scale(.96)}.m-game-card img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3 / 4}.m-game-badge{position:absolute;top:6px;left:6px;z-index:2;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:4px;color:var(--color-white);line-height:1.3}.m-game-badge--hot{background:var(--red)}.m-game-badge--new{background:var(--accent)}.m-game-badge--live{background:var(--color-green-600);animation:m-live-pulse 2s infinite}@keyframes m-live-pulse{0%,to{opacity:1}50%{opacity:.7}}.m-game-name{position:absolute;bottom:0;left:0;right:0;padding:20px 8px 8px;background:linear-gradient(transparent,#000000bf);font-size:11px;font-weight:600;color:var(--color-white);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-game-provider{display:block;font-size:9px;font-weight:400;color:#ffffff8c;margin-top:1px}.m-game-row{display:flex;gap:var(--m-gap);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--m-padding)}.m-game-row::-webkit-scrollbar{display:none}.m-game-row .m-game-card{flex:0 0 120px;scroll-snap-align:start}.m-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-gap);padding:0 var(--m-padding)}.m-cat-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--m-padding)}.m-cat-scroll::-webkit-scrollbar{display:none}.m-cat-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:500;color:var(--text3);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .2s;white-space:nowrap}.m-cat-chip .material-symbols-rounded{font-size:16px}.m-cat-chip.active{color:var(--color-white);background:var(--accent);border-color:var(--accent)}.m-cat-chip:active:not(.active){background:var(--surface2)}.m-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0000008c;opacity:0;pointer-events:none;transition:opacity .3s}.m-drawer-overlay.active{opacity:1;pointer-events:auto}.m-drawer{position:fixed;top:0;left:0;bottom:0;z-index:201;width:280px;max-width:80vw;background:var(--bg2);transform:translate(-100%);transition:transform .3s cubic-bezier(.25,.8,.25,1);overflow-y:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column}.m-drawer.open{transform:translate(0)}.m-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}.m-drawer-logo{font-size:18px;font-weight:800;color:var(--text)}.m-drawer-logo span{color:var(--accent)}.m-drawer-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:none;border-radius:var(--m-radius-sm);color:var(--text3);cursor:pointer}.m-drawer-close .material-symbols-rounded{font-size:18px}.m-drawer-nav{flex:1;padding:8px 0}.m-drawer-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;transition:background .15s,color .15s}.m-drawer-item:active{background:var(--surface)}.m-drawer-item.active{color:var(--accent);background:color-mix(in oklch,var(--accent) 8%,transparent)}.m-drawer-item .material-symbols-rounded{font-size:20px;color:var(--text3)}.m-drawer-item.active .material-symbols-rounded{color:var(--accent)}.m-drawer-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--red);color:var(--color-white);text-transform:uppercase}.m-drawer-divider{height:1px;background:var(--border);margin:4px 16px}.m-drawer-footer{padding:12px 16px;border-top:1px solid var(--border)}.m-drawer-cta{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--m-radius);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:background .2s;margin-bottom:8px}.m-drawer-cta:active{background:var(--surface2)}.m-drawer-cta-icon{width:36px;height:36px;border-radius:var(--m-radius-sm);background:color-mix(in oklch,var(--accent) 15%,transparent);display:flex;align-items:center;justify-content:center}.m-drawer-cta-icon .material-symbols-rounded{font-size:18px;color:var(--accent)}.m-drawer-cta-text{flex:1}.m-drawer-cta-title{font-size:12px;font-weight:600;color:var(--text)}.m-drawer-cta-sub{font-size:10px;color:var(--text3)}.m-promo-strip{display:flex;align-items:center;gap:8px;padding:8px var(--m-padding);background:color-mix(in oklch,var(--accent) 10%,transparent);border-bottom:1px solid color-mix(in oklch,var(--accent) 15%,transparent);overflow:hidden}.m-promo-strip-icon{flex-shrink:0;width:24px;height:24px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center}.m-promo-strip-icon .material-symbols-rounded{font-size:14px;color:var(--color-white)}.m-promo-strip-text{flex:1;font-size:12px;font-weight:600;color:var(--text);overflow:hidden;position:relative}.m-promo-strip-text span{display:inline-block;white-space:nowrap;padding-left:100%;animation:m-marquee 12s linear infinite}@keyframes m-marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.m-promo-strip-text:active span{animation-play-state:paused}.m-promo-strip-btn{flex-shrink:0;font-size:11px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;white-space:nowrap}.m-search{display:flex;align-items:center;gap:8px;margin:0 var(--m-padding);padding:10px 12px;border-radius:var(--m-radius);background:var(--surface);border:1px solid var(--border)}.m-search .material-symbols-rounded{font-size:18px;color:var(--text3);flex-shrink:0}.m-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit}.m-search input::placeholder{color:var(--text3)}.m-provider-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--m-padding)}.m-provider-scroll::-webkit-scrollbar{display:none}.m-provider-card{flex:0 0 100px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:var(--m-radius);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:background .15s,border-color .2s,transform .15s}.m-provider-card:active{transform:scale(.96);background:var(--surface2);border-color:var(--border2)}.m-provider-logo{position:relative;width:64px;height:40px;display:flex;align-items:center;justify-content:center}.m-provider-logo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--m-radius-sm);background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:m-skeleton-shine 1.4s ease-in-out infinite}.m-provider-logo img{position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .3s ease}.m-provider-logo.loaded:before{display:none}.m-provider-logo.loaded img{opacity:1}.m-provider-name{font-size:11px;font-weight:600;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1}@keyframes m-skeleton-shine{0%{background-position:200% 0}to{background-position:-200% 0}}.m-fab-deposit{position:fixed;bottom:calc(var(--m-tabbar-h) + 16px + env(safe-area-inset-bottom));right:16px;z-index:90;width:52px;height:52px;border-radius:50%;background:var(--color-green-600);border:none;box-shadow:0 4px 16px #00000059;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,box-shadow .15s}.m-fab-deposit:active{transform:scale(.92)}.m-fab-deposit .material-symbols-rounded{font-size:24px;color:var(--color-white)}.m-footer{padding:20px var(--m-padding);text-align:center;border-top:1px solid var(--border);margin-top:8px}.m-footer-brand{font-size:16px;font-weight:800;color:var(--text);margin-bottom:6px}.m-footer-brand span{color:var(--accent)}.m-footer-desc{font-size:11px;color:var(--text3);line-height:1.5;margin-bottom:12px}.m-footer-badges{display:flex;justify-content:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.m-footer-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:var(--text3)}.m-footer-badge .material-symbols-rounded{font-size:14px}.m-footer-copy{font-size:10px;color:color-mix(in oklch,var(--text3) 60%,transparent)}.m-live-dot{width:6px;height:6px;border-radius:50%;background:var(--color-green-500);animation:m-live-pulse 2s infinite;flex-shrink:0}
