/* ============================================================================ MOBILE POLISH · tier-1 betting-app feel · STRICTLY ADDITIVE ---------------------------------------------------------------------------- No markup is changed. This only upgrades touch behaviour, carousel feel, and adds an opt-in auto-hide header (toggled on by mobile-ux.js). ========================================================================== */ /* 1. Kill the 300ms tap delay on every interactive control */ a, button, [role="button"], label, summary, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], .odd-btn, .pnav-link, .mbtn, .hbtn, .btn-ghost, .btn-gold, .casino-chip, .casino-card, .theme-toggle { touch-action: manipulation; } /* 2. Native horizontal carousel for the filter / menu rows. proximity (not mandatory) keeps chip rows snappy without feeling "sticky". Add the .hscroll helper to any other horizontal scroller to get the same. */ .casino-carousel-wrap, .hscroll { scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .casino-carousel > *, .hscroll > * { scroll-snap-align: start; } /* For true media carousels where each item should lock to the edge */ .hscroll--mandatory { scroll-snap-type: x mandatory; } /* Hide scrollbars so the rows read like a native app carousel */ .casino-carousel-wrap, .hscroll, .scroll-thin { scrollbar-width: none; -ms-overflow-style: none; } .casino-carousel-wrap::-webkit-scrollbar, .hscroll::-webkit-scrollbar, .scroll-thin::-webkit-scrollbar { display: none; } /* 3. Stop pull-to-refresh / scroll-chaining from fighting the game areas */ .casino-modal, .casino-modal__frame { overscroll-behavior: contain; } @supports selector(:has(*)) { body:has(.casino-app) { overscroll-behavior-y: contain; } } /* 4. Auto-hide header on scroll-down (mobile only) to maximise game space. mobile-ux.js toggles .header-hidden on ; the existing bottom app-bar (.mbottom-nav) stays put, so navigation is always one tap away. */ @media (max-width: 1023px) { .it-header { transition: transform .28s cubic-bezier(.22, .61, .36, 1); will-change: transform; } body.header-hidden .it-header { transform: translateY(-100%); } /* keep the casino sticky toolbar flush to the top while the header is hidden */ .casino-toolbar { transition: top .28s cubic-bezier(.22, .61, .36, 1); } body.header-hidden .casino-toolbar { top: 0; } /* V2 mobile "Sports" bar — glide it up flush to the top in lock-step with the header instead of leaving a 60px gap (the old jumpy "separation"). */ .gbx-livebar { transition: top .28s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease; will-change: top; } body.header-hidden .gbx-livebar { top: 0; box-shadow: 0 6px 16px rgba(0,0,0,.28); } } /* Never auto-hide on desktop, regardless of the body flag */ @media (min-width: 1024px) { body.header-hidden .it-header { transform: none; } } /* 5. PREMIUM MOBILE BOTTOM NAV (.mbottom-nav / .mbtn) — animated icon pills. Every tab (Sport · Live · Casino · Live Casino · Golden) shows its icon in an accent pill that lifts + pops when active; tap gives a soft ripple. */ @media (max-width: 1023px) { .mbtn { position: relative; transition: color .2s ease; } /* the icon now lives in an animated rounded pill */ .mbtn i { width: 44px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, box-shadow .2s ease, color .2s ease; } .mbtn:active i { transform: scale(.9); } /* active tab — lifted, glowing accent pill + bolder label */ .mbtn.is-active i { color: var(--it-accent); transform: translateY(-3px); background: linear-gradient(180deg, color-mix(in srgb, var(--it-accent) 22%, transparent), color-mix(in srgb, var(--it-accent) 6%, transparent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--it-accent) 28%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--it-accent) 42%, transparent); animation: mbtnPop .38s cubic-bezier(.34, 1.56, .64, 1); } .mbtn.is-active span { font-weight: 800; } @keyframes mbtnPop { 0% { transform: translateY(0) scale(.86); } 55% { transform: translateY(-5px) scale(1.14); } 100% { transform: translateY(-3px) scale(1); } } /* animate the existing active pip growing in from the centre */ .mbtn.is-active::before { animation: mbtnPip .3s ease both; } @keyframes mbtnPip { from { width: 0; opacity: 0; } to { width: 22px; opacity: 1; } } /* soft tap ripple centred on the icon */ .mbtn::after { content: ''; position: absolute; left: 50%; top: 16px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--it-accent) 38%, transparent), transparent 62%); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .mbtn:active::after { animation: mbtnRipple .45s ease-out; } @keyframes mbtnRipple { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .5; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } } @media (prefers-reduced-motion: reduce) { .it-header, .casino-toolbar { transition: none !important; } .casino-carousel-wrap, .hscroll { scroll-behavior: auto; } .mbtn i, .mbtn.is-active i, .mbtn.is-active::before, .mbtn::after { animation: none !important; } }