/* Self-hosted (not loaded from Google's CDN) to avoid sending visitor IPs to a third party - see assets/fonts/OFL.txt for the font's license. */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/fredoka-variable.woff2') format('woff2'); } /* Avatar card styles - non-critical CSS moved here */ .avatar-card { background: white; border-radius: 24px; border: 4px solid #fff; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.06); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 0.5rem; width: 100%; /* Full width */ max-width: 500px; /* Limit max width on larger screens */ margin: 0 auto; /* Center the cards */ } .avatar-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 24px rgba(0,0,0,0.15), 0 6px 8px rgba(0,0,0,0.1); } .avatar-card:active { transform: scale(0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .avatar-card.rotate-animation { animation: rotate360 2s ease-in-out; transform-origin: center; will-change: transform; } @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .avatar-card img { width: 100%; height: 100%; object-fit: contain; } .graffiti-overlay, .celebration-overlay { position: absolute !important; top: 0; left: 0; pointer-events: none; z-index: 10; overflow: visible; } /* Menu Grid Styles */ main.menu-grid { padding: 1rem; max-width: 1200px; margin: 0 auto; padding-top: 1rem; } .category-section { margin-bottom: 2.5rem; position: relative; contain-intrinsic-size: auto 300px; } #recently-played-section { display: none; } html.has-recently-played #recently-played-section { display: block; } /* Disable pull-to-refresh and system gestures on game pages */ html.game-page { height: 100dvh; overflow: hidden; } html.game-page body { height: 100dvh; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } /* For games that don't need scrolling, hide overflow to prevent bouncing */ html.game-page:not(.allow-scroll) body { overflow: hidden; touch-action: none; } /* For games that DO need scrolling (like Infinite Scroll), allow overflow but keep pull-to-refresh disabled. touch-action is set explicitly on BOTH html and body: document.scrollingElement is here (it inherits the scrollable box once height is auto and overflow-y is auto), so needs its own explicit pan-y too - otherwise it falls back to the base `html { touch-action: manipulation }` rule, which some browsers resolve inconsistently against a differing value on body, silently blocking the pan gesture with no JS-visible error. */ html.game-page.allow-scroll { overflow-y: auto; height: auto; touch-action: pan-y; } html.game-page.allow-scroll body { height: auto; overflow-y: auto; touch-action: pan-y; /* Crucial: allows one-finger scroll but blocks pull-to-refresh */ } .category-title { font-size: 1.4rem; color: #333; margin-bottom: 1rem; padding-left: 0.5rem; border-left: 5px solid #6a11cb; font-weight: bold; } .horizontal-scroll { display: flex; overflow-x: auto; gap: 1.2rem; padding: 0.5rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ scroll-snap-type: x mandatory; } .horizontal-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .menu-item { flex: 0 0 210px; /* Fixed width for items in scroll */ aspect-ratio: 210 / 165; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: inherit; background: white; border-radius: 20px; border: 3px solid #fff; overflow: hidden; box-shadow: 0 6px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; text-align: center; padding: 0.8rem 1rem; will-change: transform; position: relative; } /* SW Update Toast */ #update-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(100px); background: #6a11cb; color: white; padding: 12px 24px; border-radius: 30px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px; z-index: 10000; cursor: pointer; opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease; } #update-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } #update-toast:active { transform: translateX(-50%) translateY(2px) scale(0.95); } .menu-item:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 20px rgba(0,0,0,0.12), 0 6px 8px rgba(0,0,0,0.08); } .menu-icon { width: 80px; height: 80px; aspect-ratio: 1 / 1; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } .age-badge { position: absolute; top: 10px; left: 10px; background: #FF9800; /* vibrant orange */ color: #333; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; z-index: 5; pointer-events: none; box-shadow: 0 3px 6px rgba(0,0,0,0.15); border: 2px solid white; } .trending-preview .age-badge { top: 10px; left: 10px; } .menu-item h2 { color: #6a11cb; margin: 0.3rem 0; font-size: 1.2rem; } .menu-item p { color: #666; margin: 0.2rem 0; font-size: 0.85rem; line-height: 1.2; } .menu-icon img, .menu-icon svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; } /* Trending Carousel (Netflix-style) */ .trending-carousel { padding: 1rem 0.5rem 0.5rem 0.5rem !important; gap: 1.5rem !important; } .trending-item { flex: 0 0 280px; /* Wider for preview images */ scroll-snap-align: center; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: transform; position: relative; } .trending-item:hover { transform: scale(1.08); z-index: 2; } .trending-item:active { transform: scale(0.95); } .trending-preview { width: 100%; height: 200px; /* Increased height */ border-radius: 12px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.2); background: #fff; /* White background for icons */ margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; } .trending-preview img, .trending-preview svg { width: 100%; height: 100%; object-fit: contain; /* Don't trim the icons */ display: block; } .trending-item h3 { font-size: 1.1rem; color: #333; margin: 0; font-weight: 600; text-align: center; /* Center the title */ padding: 0 0.2rem; } @media (max-width: 480px) { .trending-item { flex: 0 0 180px; /* Slightly narrower on mobile to fit more in view */ } .trending-preview { height: 180px; /* Square on mobile */ } } .feature-placeholder { text-align: center; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 600px; margin: 2rem auto; } .feature-placeholder h2 { color: #6a11cb; margin-bottom: 1rem; } .feature-placeholder p { margin-bottom: 1.5rem; color: #666; } .feature-placeholder a { display: inline-block; padding: 0.8rem 1.5rem; background: #6a11cb; color: white; text-decoration: none; border-radius: 6px; transition: background 0.3s; } .feature-placeholder a:hover { background: #2575fc; } /* Footer styles */ footer { background: #333; color: white; text-align: center; padding: 1.5rem; margin-top: 2rem; } /* Hide bottom nav bar and share widget in installed app mode */ @media (display-mode: standalone), (display-mode: fullscreen) { footer, .share-widget { display: none !important; } } footer p { font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; } .footer-nav { margin-bottom: 0.5rem; } .footer-nav a { color: #ddd; text-decoration: none; margin: 0 1rem; font-size: 1.1rem; font-weight: 500; } .footer-nav a:hover { text-decoration: underline; } .social-media { margin: 1rem 0; display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .social-label { font-size: 0.9rem; opacity: 0.9; margin: 0; } .social-icons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .social-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.9; } .social-icon:hover { transform: scale(1.15); opacity: 1; } .social-icon svg { width: 28px; height: 28px; } /* Confetti & Celebration styles */ .confetti-container, .confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10000; } /* For games that have the container in HTML by default */ .confetti { display: none; } .confetti-piece { position: absolute; width: 10px; height: 10px; opacity: 0.8; } /* Share Widget styles */ .share-widget { position: fixed; bottom: calc(160px + env(safe-area-inset-bottom)); right: 20px; transform: translateY(-50%); z-index: 1000; animation: floating-middle 3s ease-in-out infinite; } @keyframes floating-middle { 0% { transform: translateY(-50%) translateX(0px); } 50% { transform: translateY(-60%) translateX(0px); } 100% { transform: translateY(-50%) translateX(0px); } } .share-btn { width: 50px; height: 50px; border-radius: 50%; background: #6a11cb; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .share-btn:active { transform: scale(0.9); } .share-btn svg { width: 24px; height: 24px; fill: currentColor; } /* Base styles */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */ } /* Blocks pinch/double-tap zoom at the CSS level - modern iOS Safari ignores the viewport meta's user-scalable=no, so this is the layer that actually still works there. Still allows normal scrolling/panning. */ html { touch-action: manipulation; } body { touch-action: manipulation; font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f7f4; /* soft mint/blue tint */ background-image: radial-gradient(#dcf0e8 2px, transparent 2px); background-size: 30px 30px; color: #333; line-height: 1.6; overflow-x: hidden; /* guards against any horizontally-scrollable carousel/image bleeding past the viewport */ /* Prevent text selection across the whole app */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Safe area insets for notches */ padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Allow selection in inputs/textareas if added in future */ input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* Header styles */ header { background: linear-gradient(135deg, #00C9FF 0%, #92FE9D 100%); color: #333; padding: calc(1rem + env(safe-area-inset-top)) 1rem 1rem 1rem; text-align: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-bottom: 4px solid rgba(255, 255, 255, 0.3); min-height: auto; /* Reduced from 100px since

is removed */ } /* Shrink header padding exclusively on Game Pages (which have the nav container) */ header:has(.header-nav-container) { padding: 0.4rem 1rem; } /* Header Navigation Container */ .header-nav-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0 !important; /* Removed extra space below arrows */ width: 100% !important; padding: 0 5px !important; box-sizing: border-box !important; } .nav-arrow { background: transparent !important; border: none !important; width: 60px !important; height: 60px !important; min-width: 60px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; padding: 0 !important; } .nav-arrow svg { width: 100% !important; height: 100% !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important; } .nav-arrow:hover { transform: scale(1.1) !important; } .nav-arrow:active { transform: scale(0.9) !important; } .home-icon { font-size: 2.5rem; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 1; transition: transform 0.2s; -webkit-tap-highlight-color: transparent; } .home-icon:active { transform: scale(0.9); } @media (max-width: 480px) { .home-icon { font-size: 2rem; } } header h1, header .site-title { font-size: 1.8rem !important; /* Increased by 10% from 1.6rem */ margin: 0 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; text-align: center !important; text-shadow: 2px 2px 0px rgba(255,255,255,0.7); } @media (max-width: 480px) { header h1, header .site-title { font-size: 1.55rem !important; /* Increased by 10% from 1.4rem */ } .nav-arrow { width: 53px !important; height: 53px !important; min-width: 53px !important; } .header-nav-container { padding: 0 2px !important; } } /* Common main layout */ main { padding: 1rem; max-width: 1200px; margin: 0 auto; padding-top: 2rem; } /* Loading indicator */ .loading { text-align: center; padding: 20px; font-size: 1.2rem; color: #666; } .hidden { display: none; } /* Common responsive adjustments */ @media (max-width: 768px) { header { padding: 0.8rem; } header:has(.header-nav-container) { padding: 0.2rem 0.8rem; } header h1, header .site-title { font-size: 1.45rem !important; /* Increased by 10% from 1.3rem */ } main { padding: 0.8rem; } } /* Specific styles for Canvas page */ main.canvas-main { padding: 0; margin: 0; flex: 1; /* Take remaining space */ display: flex; flex-direction: column; } .canvas-container { flex: 1; position: relative; background-color: white; margin: 1rem; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; } #drawingCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; background-color: white; } .download-btn { position: absolute; bottom: 1rem; left: 1rem; z-index: 10; padding: 0.8rem; background: #4CAF50; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: background 0.3s, transform 0.2s; display: flex; align-items: center; justify-content: center; } .download-btn:hover { background: #45a049; transform: scale(1.05); } .download-btn:active { transform: scale(0.98); } /* Specific styles for Rocket page */ .rocket-body { overflow: hidden; /* Prevent scrolling */ height: 100vh; height: 100dvh; position: relative; } #gameContainer { position: relative; width: 100%; height: calc(100vh - 140px); /* Full height minus header and footer */ height: calc(100dvh - 140px); background: linear-gradient(to bottom, #87CEEB, #E0F7FA); overflow: hidden; } .rocket { position: absolute; font-size: 3rem; cursor: pointer; z-index: 10; transition: transform 0.1s; user-select: none; /* Create a larger touch area */ margin: -30px; padding: 30px; } .rocket:hover { transform: scale(1.1); } /* Specific styles for Color page */ .mixing-area { display: flex; justify-content: space-around; align-items: center; margin: 2rem 0; flex-wrap: nowrap; gap: 1rem; } .color-placeholder { width: 140px; height: 140px; border: 3px dashed #ccc; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #666; background-color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .color-placeholder.filled { border: 3px solid #333; background-color: transparent; } .color-placeholder.drag-over { border: 3px solid #6a11cb; background-color: rgba(106, 17, 203, 0.1); } .mixed-color { width: 140px; height: 140px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); transition: all 0.3s ease; } .arrow { font-size: 2rem; color: #6a11cb; } /* Color grid */ .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .color-tile { aspect-ratio: 1/1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); cursor: grab; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; } .color-tile:active { cursor: grabbing; } .color-tile:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .color-name { background-color: rgba(0, 0, 0, 0.5); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin-top: 0.5rem; } /* Instructions */ .instructions { text-align: center; margin: 1.5rem 0; padding: 1rem; background-color: #e3f2fd; border-radius: 8px; color: #1565c0; } /* Clear button */ .clear-btn { display: block; margin: 1.5rem auto; padding: 0.8rem 1.5rem; background: #6a11cb; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background 0.3s; } .clear-btn:hover { background: #5a0db9; } /* Responsive adjustments for Color page */ @media (max-width: 768px) { .mixing-area { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.5rem; } .arrow { transform: rotate(0deg); font-size: 1.5rem; } .color-placeholder, .mixed-color { width: 100px; height: 100px; font-size: 0.9rem; } } @media (max-width: 480px) { .mixing-area { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; justify-content: flex-start; } .color-placeholder, .mixed-color { width: 90px; height: 90px; min-width: 90px; font-size: 0.8rem; } .arrow { min-width: 30px; text-align: center; } .color-grid { gap: 0.5rem; } .color-tile { font-size: 0.7rem; } } /* Responsive adjustments for desktop and small mobile */ @media (min-width: 769px) { main#avatar-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .avatar-card { max-width: 250px; /* Increased for better visibility on tablets/desktops */ } main.menu-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjust for menu items */ } } @media (max-width: 480px) { .avatar-card { max-width: none; /* Remove max width constraint on mobile */ } main.menu-grid { grid-template-columns: 1fr; /* Single column on mobile */ } } /* Blog SEO Elements */ .pillar-link { background: #f1f3f5; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; font-weight: bold; display: block; text-decoration: none; color: #495057; border-left: 4px solid #6a11cb; transition: background 0.2s; } .pillar-link:hover { background: #e9ecef; } .pro-tip { background: #fff9db; padding: 1rem; border-radius: 8px; border-left: 4px solid #fcc419; margin: 1.5rem 0; font-style: italic; } .human-touch { background: #f8f9fa; padding: 1.5rem; border-radius: 12px; margin: 2rem 0; border: 1px dashed #dee2e6; } /* Floating Action Buttons (FAB) for Games */ .floating-restart-btn { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 20px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1000; transition: transform 0.2s ease, box-shadow 0.2s ease; } .floating-restart-btn:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0,0,0,0.3); } .floating-restart-btn:active { transform: scale(0.9); } .floating-restart-btn svg { width: 24px; height: 24px; } /* Ghost Hand for visual guidance */ .ghost-hand { position: fixed; font-size: 4.5rem; pointer-events: none; z-index: 10002; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); opacity: 1; transform: translate(-50%, -50%); } .ghost-tap { animation: ghost-tap-anim 1s infinite; } @keyframes ghost-tap-anim { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; } } .ghost-swipe { animation: ghost-swipe-anim 2s infinite; } @keyframes ghost-swipe-anim { 0% { transform: translate(-50%, -50%) translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } 80% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))); opacity: 0.8; } 100% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))); opacity: 0; } } .ghost-swipe-long { animation: ghost-swipe-long-anim 2s infinite; } @keyframes ghost-swipe-long-anim { 0% { transform: translate(-50%, -50%) translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } 80% { transform: translate(-50%, -50%) translate(0, -250px); opacity: 0.8; } 100% { transform: translate(-50%, -50%) translate(0, -250px); opacity: 0; } } .ghost-trace { animation: ghost-trace-anim 2s infinite; } @keyframes ghost-trace-anim { 0% { transform: translate(-50%, -50%) translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } 80% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))); opacity: 0.8; } 100% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))); opacity: 0; } } .ghost-pair-tap { animation: ghost-pair-tap-anim 3s infinite; } @keyframes ghost-pair-tap-anim { 0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 0; } 5% { opacity: 0.8; } 15% { transform: translate(-50%, -50%) translate(0, 0) scale(0.8); } 25% { transform: translate(-50%, -50%) translate(0, 0) scale(1); } 45% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) scale(1); } 60% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) scale(0.8); } 75% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) scale(1); } 95% { opacity: 0.8; } 100% { transform: translate(-50%, -50%) translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) scale(1); opacity: 0; } } .ghost-scrub { animation: ghost-scrub-anim 2s infinite linear; } @keyframes ghost-scrub-anim { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(50px) rotate(0deg); opacity: 0; } 20% { opacity: 0.8; } 80% { transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg); opacity: 0.8; } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg); opacity: 0; } } /* Interactive Feedback */ .halo-glow { box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8); animation: halo-pulse 2s infinite; } @keyframes halo-pulse { 0%, 100% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.9); } } .squash-stretch { transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .squashed { transform: scale(1.2, 0.8) !important; } .stretched { transform: scale(0.8, 1.2) !important; } .bounce-in { animation: bounce-in-anim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes bounce-in-anim { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .ripple-effect { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple-anim 0.6s linear; pointer-events: none; z-index: 9999; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* Toddler friendly hitbox rule */ .large-hitbox { position: relative; } .large-hitbox::after { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; } /* No-scroll zone for games */ .no-scroll-zone { overflow: hidden !important; touch-action: none !important; } /* Celebration Message Popup (Global) */ .celebration-message-global { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%); color: white; padding: 20px 40px; border-radius: 20px; font-size: 2.5rem; font-weight: bold; font-family: 'Comic Sans MS', 'Nunito', 'Segoe UI', cursive, sans-serif; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 10001; pointer-events: none; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: celebration-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .celebration-star { font-size: 3rem; animation: bounce-star 1s ease-in-out infinite alternate; } @keyframes bounce-star { from { transform: scale(1); } to { transform: scale(1.2); } } .celebration-message-global.fade-out { animation: celebration-fade-out 0.5s ease forwards; } @keyframes celebration-pop-in { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes celebration-fade-out { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } } /* Color Swirl Animation */ .swirl-animation { animation: color-swirl 1s ease-in-out; } @keyframes color-swirl { 0% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg); } 50% { transform: rotate(180deg) scale(1.2); filter: hue-rotate(180deg); } 100% { transform: rotate(360deg) scale(1); filter: hue-rotate(360deg); } } /* Landing Page Specific Styles */ .landing-section { padding: 3rem 1rem; max-width: 1000px; margin: 0 auto; text-align: center; } .landing-section h2 { color: #6a11cb; font-size: 2rem; margin-bottom: 1.5rem; font-weight: bold; } .landing-section p { font-size: 1.1rem; color: #444; margin-bottom: 1.5rem; text-align: left; } /* Horizontal Scroll Navigation Arrows */ .scroll-container-wrapper { position: relative; width: 100%; margin: 2rem 0; } .scroll-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.7); border: none; border-radius: 50%; color: #6a11cb; font-size: 1.5rem; font-weight: bold; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: background 0.3s, opacity 0.3s; opacity: 0.8; } .scroll-nav-btn:hover { background: rgba(255, 255, 255, 0.9); opacity: 1; } .scroll-nav-btn.prev { left: 10px; } .scroll-nav-btn.next { right: 10px; } @media (max-width: 768px) { .scroll-nav-btn { width: 32px; height: 32px; font-size: 1.2rem; } } .campaign-images { display: flex; align-items: flex-start; overflow-x: auto; gap: 1.5rem; padding: 1rem 0.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .campaign-images::-webkit-scrollbar { display: none; } .campaign-images img { flex: 0 0 85%; scroll-snap-align: center; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .cta-container { margin: 3rem 0; } .btn-primary { display: inline-block; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 1.2rem 2.5rem; font-size: 1.3rem; font-weight: bold; text-decoration: none; border-radius: 50px; box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3); transition: transform 0.3s, box-shadow 0.3s; } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4); } .parents-love-scroll { display: flex; align-items: flex-start; overflow-x: auto; gap: 1.5rem; padding: 1rem 0.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; } .parents-love-scroll::-webkit-scrollbar { display: none; } .parent-card { flex: 0 0 300px; scroll-snap-align: center; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .parent-card img { width: 100%; height: auto; display: block; } .category-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .category-link-item { background: white; padding: 1.5rem; border-radius: 12px; text-decoration: none; color: #6a11cb; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: transform 0.2s; border: 1px solid #eee; } .category-link-item:hover { transform: translateY(-5px); background: #f8f9ff; } .featured-badges { display: flex; overflow-x: auto; gap: 20px; margin: 20px 0; padding: 1rem 0.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: center; } .featured-badges::-webkit-scrollbar { display: none; } .featured-badges a { flex: 0 0 auto; scroll-snap-align: center; display: inline-block; transition: transform 0.2s; } .featured-badges a:hover { transform: scale(1.05); } @media (max-width: 600px) { .landing-section { padding: 2rem 1rem; } .landing-section h2 { font-size: 1.6rem; } .parent-card { flex: 0 0 85%; } } /* TWA / Standalone PWA Overrides */ @media (display-mode: standalone), (display-mode: fullscreen) { footer { display: none !important; } header p { display: none !important; } main { padding-bottom: 4rem; } } /* Joy Meter Utility */ .global-joy-meter-wrapper { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; justify-content: center; pointer-events: none; } .joy-meter-container { width: 100%; height: 15px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .joy-meter-fill, .joy-meter { height: 100%; width: 0%; background: linear-gradient(to right, #FFD700, #FFA500); transition: width 0.3s ease; } /* Centralized Button Lock for Games */ .control-locked { opacity: 0.5; filter: grayscale(1); cursor: not-allowed !important; } .shake-error { animation: shake-error 0.4s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake-error { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* In-article images for blog posts */ .blog-inline-image { display: block; width: 100%; max-width: 600px; height: auto; margin: 1.5rem auto; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .blog-inline-image-caption { display: block; text-align: center; color: #777; font-size: 0.9rem; margin-top: -1rem; margin-bottom: 1.5rem; }