/* ==== GLOBAL STYLE ==== */ body { font-family: 'Inter', sans-serif; } h1, h2, h3 { font-family: 'Staatliches', cursive; } /* ==== LOADING OVERLAY STYLES ==== */ #loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; } #loadingOverlay.hidden { opacity: 0; visibility: hidden; } .loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .loader { width: 60px; height: 60px; border: 5px solid #f3f3f3; border-top: 5px solid #0ea5e9; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } .loading-logo { width: 180px; height: auto; margin-bottom: 20px; } .loading-text { font-family: 'Staatliches', cursive; font-size: 1.5rem; color: #0ea5e9; text-align: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ==== WHITE LINE DECORATION ==== */ .white-line { position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, white, transparent); z-index: 5; } .white-line-top { top: 0; } .white-line-bottom { bottom: 0; } /* ==== IMPROVED BANNER RUNNER STYLES ==== */ .banner-runner { position: fixed; top: 64px; left: 0; width: 100%; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0ea5e9 100%); color: white; padding: 4px 0; overflow: hidden; z-index: 45; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .banner-runner-content { display: flex; white-space: nowrap; animation: bannerRunner 20s linear infinite; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; text-align: center; letter-spacing: 0.3px; } .banner-runner-content span { padding-right: 30px; display: flex; align-items: center; } /* Banner runner animation */ @keyframes bannerRunner { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Add a subtle shine effect */ .banner-runner::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shine 3s infinite; } @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } /* ==== UPDATED BANNER SLIDER STYLES - FULL IMAGE DISPLAY ==== */ .banner-container { position: relative; width: 100%; overflow: hidden; border-radius: 1rem; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Auto height based on image aspect ratio */ height: auto; /* Prevent all movement on mobile */ transform: translateZ(0); backface-visibility: hidden; will-change: transform; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; /* Prevent any layout shifts */ contain: layout style paint; /* Make banner container clickable for showing buttons */ cursor: pointer; } .banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; justify-content: center; /* Prevent movement */ transform: translateZ(0); backface-visibility: hidden; perspective: 1000; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; /* Ensure full coverage */ overflow: hidden; } .banner-slide.active { opacity: 1; position: relative; z-index: 1; } .banner-image-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 1rem; /* Prevent movement */ transform: translateZ(0); backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; /* Ensure full coverage */ position: relative; } .banner-image { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; border-radius: 1rem; /* Prevent image movement - crucial for mobile */ transform: translateZ(0); backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; /* Ensure smooth rendering */ image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -webkit-font-smoothing: antialiased; /* Hardware acceleration */ will-change: transform; /* Prevent any scaling or movement */ flex-shrink: 0; max-width: 100%; } .banner-indicators { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 3; } .banner-indicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; /* Prevent movement */ transform: translateZ(0); -webkit-transform: translateZ(0); } .banner-indicator.active { background-color: white; transform: scale(1.2) translateZ(0); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); } .banner-indicator:hover { background-color: rgba(255, 255, 255, 0.9); transform: scale(1.1) translateZ(0); } /* ==== BANNER NAVIGATION BUTTONS - SHOW ON TAP ==== */ .banner-nav { position: absolute; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.95)); color: #0ea5e9; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.4s ease; backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Prevent movement */ transform: translateY(-50%) translateZ(0); -webkit-transform: translateY(-50%) translateZ(0); /* Hidden by default, show on tap */ opacity: 0; pointer-events: none; } /* Show buttons when banner is active (tapped/clicked) */ .banner-container.active .banner-nav, .banner-container:active .banner-nav, .banner-container:focus .banner-nav, .banner-container:hover .banner-nav { opacity: 1; pointer-events: auto; } .banner-nav:hover { background: linear-gradient(135deg, #ffffff, #e6f7ff); transform: translateY(-50%) scale(1.15) translateZ(0) !important; color: #0284c7; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); opacity: 1 !important; } .banner-prev { left: 15px; } .banner-next { right: 15px; } /* Button active states for better UX */ .banner-nav:active { transform: translateY(-50%) scale(0.95) translateZ(0) !important; transition: transform 0.1s ease; } /* Ensure buttons are visible during interaction */ .banner-nav:focus { opacity: 1 !important; outline: 2px solid #0ea5e9; outline-offset: 2px; } /* ==== GAME FILTER STYLES - SINGLE LINE ==== */ .filter-container { display: flex; align-items: center; justify-content: center; margin: 1.5rem 0 2rem; padding: 0 1rem; position: relative; max-width: 100%; overflow: hidden; } .filter-scroll-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 0.5rem 0; } .filter-scroll-wrapper::-webkit-scrollbar { display: none; } .filter-buttons { display: flex; gap: 0.75rem; justify-content: center; min-width: max-content; padding: 0 0.5rem; } .filter-btn { background: white; border: 2px solid #0ea5e9; color: #0ea5e9; padding: 0.5rem 1rem; border-radius: 2rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2); flex-shrink: 0; } .filter-btn:hover { background: #f0f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); } .filter-btn.active { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; border-color: #0284c7; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4); } /* ==== VISA OVERLAY STYLES ==== */ /* Visa Topup Logo Overlay with Animation */ .visa-overlay { position: fixed; bottom: 100px; right: 30px; width: 70px; height: 70px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); cursor: pointer; z-index: 40; transition: all 0.3s ease; border: 3px solid #0ea5e9; overflow: hidden; padding: 5px; animation: pulse 2s infinite; } .visa-overlay:hover { transform: scale(1.1); box-shadow: 0 12px 35px rgba(14, 165, 233, 0.6); animation: none; } .visa-overlay img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } /* Pulsing animation */ @keyframes pulse { 0% { box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); } 50% { box-shadow: 0 8px 30px rgba(14, 165, 233, 0.7), 0 0 0 10px rgba(14, 165, 233, 0.1); } 100% { box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); } } /* ==== UPDATED GAME CARD STYLES - LARGER IMAGES ==== */ .game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; } .game-card { background: white; border-radius: 1.2rem; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); min-height: 240px; position: relative; overflow: hidden; cursor: pointer; border: 2px solid transparent; } .game-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(2, 132, 199, 0.05) 100%); opacity: 0; transition: opacity 0.3s ease; } .game-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); border-color: rgba(14, 165, 233, 0.2); } .game-card:hover::before { opacity: 1; } /* Tap animation for game cards */ .game-card:active { transform: translateY(-2px) scale(0.98); transition: all 0.1s ease; } .game-card.tap-effect { animation: cardTap 0.4s ease; } @keyframes cardTap { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { transform: scale(0.97); } 75% { transform: scale(0.95); } 100% { transform: scale(1); } } /* Ripple effect for game cards */ .game-card::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(14, 165, 233, 0.3); transform: translate(-50%, -50%); opacity: 0; transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease; } .game-card.ripple::after { width: 200px; height: 200px; opacity: 1; } /* LARGER GAME ICONS */ .game-icon { width: 100px; height: 100px; object-fit: contain; border-radius: 0.75rem; transition: all 0.3s ease; position: relative; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); margin-bottom: 0.5rem; } .game-card:hover .game-icon { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)); } .game-title { font-size: 1rem; font-weight: 600; color: #0c4a6e; text-align: center; margin: 0.5rem 0; position: relative; z-index: 1; transition: all 0.3s ease; } .game-card:hover .game-title { color: #0ea5e9; transform: translateY(-2px); } .game-button { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease; width: 100%; text-align: center; position: relative; z-index: 1; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3); overflow: hidden; margin-top: auto; } .game-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .game-button:hover { background: linear-gradient(135deg, #0284c7, #0ea5e9); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4); } .game-button:hover::before { left: 100%; } .game-button:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(14, 165, 233, 0.4); } .unavailable-button { background-color: #9ca3af; color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 500; width: 100%; text-align: center; cursor: not-allowed; position: relative; z-index: 1; border: none; margin-top: auto; } /* ==== FOOTER STYLES ==== */ /* Footer with Angkor Wat background */ .footer-with-angkor { background-image: url('https://ik.imagekit.io/mk8c3kthv/Game%20Store/o0KOt7O.png?updatedAt=1756142277703'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; position: relative; } .footer-with-angkor::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(6, 78, 147, 0.85), rgba(6, 78, 147, 0.95)); z-index: 0; } .footer-content { position: relative; z-index: 1; } /* ==== RESPONSIVE STYLES ==== */ /* Responsive adjustments */ @media (max-width: 640px) { .header-title { font-size: 1.5rem; } /* Banner runner mobile adjustments */ .banner-runner { top: 56px; padding: 3px 0; } .banner-runner-content { font-size: 0.7rem; animation: bannerRunner 15s linear infinite; } .banner-runner-content span { padding-right: 20px; } /* Banner mobile adjustments - full image display */ .banner-container { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Extra mobile optimizations */ -webkit-overflow-scrolling: touch; overflow: hidden; /* Auto height for full image */ height: auto; max-height: none; } /* BANNER NAVIGATION BUTTONS - MOBILE SIZE */ .banner-nav { width: 40px; height: 40px; font-size: 0.9rem; /* Hidden by default, show on tap */ opacity: 0; pointer-events: none; display: flex !important; } .banner-prev { left: 10px; } .banner-next { right: 10px; } .banner-indicators { bottom: 15px; } .banner-indicator { width: 10px; height: 10px; } .banner-image { /* Force hardware acceleration on mobile */ -webkit-transform: translateZ(0); transform: translateZ(0); /* Ensure full image display on mobile */ object-fit: contain; object-position: center; width: 100%; height: auto; max-height: none; } /* Game filter mobile adjustments */ .filter-container { margin: 1rem 0 1.5rem; padding: 0 0.5rem; } .filter-buttons { gap: 0.5rem; } .filter-btn { padding: 0.4rem 0.8rem; font-size: 0.75rem; } /* Mobile: 3 games per row (default) */ .game-grid { gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .game-card { padding: 1rem; min-height: 200px; } /* Larger game icons for mobile */ .game-icon { width: 80px; height: 80px; margin-bottom: 0.25rem; } .game-title { font-size: 0.8rem; margin: 0.25rem 0; } .game-button, .unavailable-button { padding: 0.5rem 0.75rem; font-size: 0.7rem; } .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; } .footer-logo { margin: 0 auto; } .visa-overlay { width: 60px; height: 60px; bottom: 90px; right: 20px; z-index: 40; animation: pulse-mobile 2s infinite; } /* Footer mobile improvements */ .footer-section { display: flex; flex-direction: column; align-items: center; } .footer-section ul { display: flex; flex-direction: column; align-items: center; } .payment-methods { justify-content: center; } /* Loading overlay mobile adjustments */ .loading-logo { width: 140px; } .loading-text { font-size: 1.2rem; } /* Slightly smaller pulse for mobile */ @keyframes pulse-mobile { 0% { box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4); } 50% { box-shadow: 0 6px 25px rgba(14, 165, 233, 0.7), 0 0 0 8px rgba(14, 165, 233, 0.1); } 100% { box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4); } } } @media (min-width: 641px) and (max-width: 1024px) { .banner-container { /* Auto height for tablets */ height: auto; max-height: none; } /* BANNER NAVIGATION BUTTONS - TABLET SIZE */ .banner-nav { width: 50px; height: 50px; font-size: 1.2rem; display: flex !important; /* Hidden by default, show on tap/hover */ opacity: 0; pointer-events: none; } .banner-prev { left: 15px; } .banner-next { right: 15px; } .footer-grid { grid-template-columns: repeat(2, 1fr); } /* Tablet: 3 games per row */ .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .game-card { min-height: 260px; padding: 1.5rem; } /* Larger game icons for tablet */ .game-icon { width: 100px; height: 100px; margin-bottom: 0.5rem; } .game-title { font-size: 1rem; } } @media (min-width: 1025px) { .banner-container { /* Auto height for desktop */ height: auto; max-height: none; } /* BANNER NAVIGATION BUTTONS - DESKTOP SIZE */ .banner-nav { width: 65px; height: 65px; font-size: 1.6rem; display: flex !important; /* Hidden by default, show on hover */ opacity: 0; pointer-events: none; } .banner-prev { left: 25px; } .banner-next { right: 25px; } .footer-grid { grid-template-columns: repeat(5, 1fr); } /* Desktop: 4 games per row */ .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .game-card { padding: 1.5rem; min-height: 280px; } /* Largest game icons for desktop */ .game-icon { width: 120px; height: 120px; margin-bottom: 0.75rem; } .game-title { font-size: 1.125rem; } .game-button, .unavailable-button { padding: 0.75rem 1.5rem; font-size: 0.9rem; } } /* ==== BANNER NAVIGATION ENHANCEMENTS - SHOW ON TAP ==== */ /* Show buttons when banner container has active class */ .banner-container.active .banner-nav, .banner-container:active .banner-nav, .banner-container:focus .banner-nav, .banner-container:hover .banner-nav { opacity: 1; pointer-events: auto; } /* Touch device improvements */ @media (hover: none) { .banner-nav { opacity: 0; pointer-events: none; } .banner-container.active .banner-nav, .banner-container:active .banner-nav { opacity: 1; pointer-events: auto; } .banner-nav:active { transform: translateY(-50%) scale(0.9) translateZ(0) !important; opacity: 1 !important; } } /* Loading states for banner navigation */ .banner-nav.loading { pointer-events: none; opacity: 0.5 !important; } /* Animation for banner slide transitions */ @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .banner-slide.active { animation: slideIn 0.8s ease-out; } /* Ensure buttons are clickable when visible */ .banner-nav { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.3s ease, transform 0.3s ease; } .banner-container.active .banner-nav, .banner-container:active .banner-nav, .banner-container:focus .banner-nav, .banner-container:hover .banner-nav { pointer-events: auto; } /* Mobile touch feedback */ .banner-nav:active { background: linear-gradient(135deg, #e6f7ff, #ffffff) !important; transition: transform 0.1s ease, background 0.1s ease; } /* Banner container active state styling */ .banner-container.active { cursor: default; } /* Smooth transition for button appearance */ .banner-nav { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }