/* ==== GLOBAL STYLES ==== */ 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 #ec4899; 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: #ec4899; text-align: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ==== 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); height: auto; transform: translateZ(0); backface-visibility: hidden; will-change: transform; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; contain: layout style paint; 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; transform: translateZ(0); backface-visibility: hidden; perspective: 1000; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; 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; transform: translateZ(0); backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; position: relative; } .banner-image { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; border-radius: 1rem; transform: translateZ(0); backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -webkit-font-smoothing: antialiased; will-change: transform; 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; 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(253, 242, 248, 0.95)); color: #ec4899; 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); transform: translateY(-50%) translateZ(0); -webkit-transform: translateY(-50%) translateZ(0); 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, #fdf2f8); transform: translateY(-50%) scale(1.15) translateZ(0) !important; color: #db2777; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); opacity: 1 !important; } .banner-prev { left: 15px; } .banner-next { right: 15px; } .banner-nav:active { transform: translateY(-50%) scale(0.95) translateZ(0) !important; transition: transform 0.1s ease; } .banner-nav:focus { opacity: 1 !important; outline: 2px solid #ec4899; outline-offset: 2px; } /* ==== SKYEE OVERLAY STYLES ==== */ .skyee-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(236, 72, 153, 0.4); cursor: pointer; z-index: 40; transition: all 0.3s ease; border: 3px solid #ec4899; overflow: hidden; padding: 5px; animation: pulse 2s infinite; } .skyee-overlay:hover { transform: scale(1.1); box-shadow: 0 12px 35px rgba(236, 72, 153, 0.6); animation: none; } .skyee-overlay img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } @keyframes pulse { 0% { box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4); } 50% { box-shadow: 0 8px 30px rgba(236, 72, 153, 0.7), 0 0 0 10px rgba(236, 72, 153, 0.1); } 100% { box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4); } } /* ==== GAME GRID STYLES ==== */ .game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; } .game-card { background: white; border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: all 0.3s ease; min-height: 200px; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .game-icon { width: 80px; height: 80px; object-fit: contain; border-radius: 0.75rem; } .game-title { font-size: 1.125rem; font-weight: 600; color: #831843; text-align: center; margin-top: 1rem; margin-bottom: 1rem; } .game-button { background-color: #ec4899; color: white; padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-weight: 500; transition: background-color 0.3s; width: 100%; text-align: center; } .game-button:hover { background-color: #db2777; } .unavailable-button { background-color: #9ca3af; color: white; padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-weight: 500; width: 100%; text-align: center; cursor: not-allowed; } /* ==== FOOTER STYLES ==== */ .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(147, 6, 84, 0.85), rgba(147, 6, 84, 0.95)); z-index: 0; } .footer-content { position: relative; z-index: 1; } /* ==== RESPONSIVE STYLES ==== */ @media (max-width: 640px) { .header-title { font-size: 1.5rem; } .banner-container { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); -webkit-overflow-scrolling: touch; overflow: hidden; height: auto; max-height: none; } .banner-nav { width: 40px; height: 40px; font-size: 0.9rem; 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 { -webkit-transform: translateZ(0); transform: translateZ(0); object-fit: contain; object-position: center; width: 100%; height: auto; max-height: none; } .game-grid { gap: 0.75rem; } .game-card { padding: 1rem; min-height: 180px; } .game-icon { width: 60px; height: 60px; } .game-title { font-size: 0.875rem; margin-top: 0.75rem; margin-bottom: 0.75rem; } .game-button, .unavailable-button { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; } .footer-logo { margin: 0 auto; } .skyee-overlay { width: 60px; height: 60px; bottom: 90px; right: 20px; z-index: 40; animation: pulse-mobile 2s infinite; } .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-logo { width: 140px; } .loading-text { font-size: 1.2rem; } @keyframes pulse-mobile { 0% { box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4); } 50% { box-shadow: 0 6px 25px rgba(236, 72, 153, 0.7), 0 0 0 8px rgba(236, 72, 153, 0.1); } 100% { box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4); } } } @media (min-width: 641px) and (max-width: 1024px) { .banner-container { height: auto; max-height: none; } .banner-nav { width: 50px; height: 50px; font-size: 1.2rem; display: flex !important; opacity: 0; pointer-events: none; } .banner-prev { left: 15px; } .banner-next { right: 15px; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .game-grid { gap: 1.25rem; } .game-card { min-height: 220px; padding: 1.5rem; } .game-icon { width: 90px; height: 90px; } .game-title { font-size: 1rem; } } @media (min-width: 1025px) { .banner-container { height: auto; max-height: none; } .banner-nav { width: 65px; height: 65px; font-size: 1.6rem; display: flex !important; opacity: 0; pointer-events: none; } .banner-prev { left: 25px; } .banner-next { right: 25px; } .footer-grid { grid-template-columns: repeat(5, 1fr); } .game-grid { gap: 1.5rem; } .game-card { padding: 2rem; min-height: 240px; } .game-icon { width: 100px; height: 100px; } .game-title { font-size: 1.25rem; } .game-button, .unavailable-button { padding: 0.75rem 2rem; font-size: 1rem; } } /* ==== BANNER NAVIGATION ENHANCEMENTS ==== */ .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; } } /* 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, #fdf2f8, #ffffff) !important; transition: transform 0.1s ease, background 0.1s ease; } /* 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); } /* ==== MENU DROPDOWN STYLES ==== */ #menuDropdown { transition: all 0.3s ease; } #menuDropdown.hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; } /* ==== ACCESSIBILITY & ENHANCEMENTS ==== */ html { scroll-behavior: smooth; } button:focus, a:focus { outline: 2px solid #ec4899; outline-offset: 2px; } ::selection { background-color: #ec4899; color: white; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #ec4899; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #db2777; }