@font-face { font-family: 'Nunito'; src: url('../fonts/nunito/Nunito-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito/Nunito-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito/Nunito-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito/Nunito-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
:root { --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --default-font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html, body, button, input, select, textarea, svg, text, * { font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }


        body { margin: 0; padding: 0; overflow: hidden; background-color: #0f172a; }
        * { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px) rotate(-2deg); }
            75% { transform: translateX(4px) rotate(2deg); }
        }
        .shake-anim { animation: shake 0.4s ease-in-out; }

        .animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes pop { 0% { transform: scale(0) translateY(-20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

        @keyframes slideUpPop {
            0% { transform: translateY(40px) scale(0.5); opacity: 0; }
            80% { transform: translateY(-5px) scale(1.05); opacity: 1; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        .animate-word-pop { animation: slideUpPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: inline-block; }

        .particle-in { animation: fly-in-anim 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; position: absolute; left: 50%; bottom: 10%; margin-left: -1.5rem; }
        @keyframes fly-in-anim {
            0% { bottom: 10%; transform: translateX(0px) scale(0.5) rotate(0deg); opacity: 0; }
            20% { opacity: 1; transform: translateX(50px) scale(1.5) rotate(45deg); }
            80% { opacity: 1; transform: translateX(-20px) scale(1) rotate(120deg); }
            100% { bottom: 50%; transform: translateX(0px) scale(0) rotate(180deg); opacity: 0; }
        }

        .particle-out { animation: fly-out-anim 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; position: absolute; left: 50%; bottom: 50%; margin-left: -1.5rem; }
        @keyframes fly-out-anim {
            0% { bottom: 50%; transform: translateX(0px) scale(1) rotate(0deg); opacity: 1; }
            20% { transform: translateX(-50px) scale(1.5) rotate(-45deg); }
            80% { opacity: 1; transform: translateX(20px) scale(1) rotate(-120deg); }
            100% { bottom: 10%; transform: translateX(0px) scale(0.5) rotate(-180deg); opacity: 0; }
        }

        @keyframes confetti-1 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(-40px, -60px) scale(0); opacity: 0; } }
        @keyframes confetti-2 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(40px, -50px) scale(0); opacity: 0; } }
        @keyframes confetti-3 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(-30px, 50px) scale(0); opacity: 0; } }
        @keyframes confetti-4 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(30px, 60px) scale(0); opacity: 0; } }
        @keyframes confetti-5 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(-60px, 0px) scale(0); opacity: 0; } }
        @keyframes confetti-6 { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(60px, 0px) scale(0); opacity: 0; } }
        
        .animate-confetti-1 { animation: confetti-1 0.4s ease-out forwards; }
        .animate-confetti-2 { animation: confetti-2 0.4s ease-out forwards; }
        .animate-confetti-3 { animation: confetti-3 0.4s ease-out forwards; }
        .animate-confetti-4 { animation: confetti-4 0.4s ease-out forwards; }
        .animate-confetti-5 { animation: confetti-5 0.4s ease-out forwards; }
        .animate-confetti-6 { animation: confetti-6 0.4s ease-out forwards; }

        .runner-track { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); position: relative; overflow: hidden; }
        .track-lines {
            background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .03) 75%, rgba(255, 255, 255, .03) 76%, transparent 77%, transparent);
            background-size: 100% 80px; animation: roadScroll 1.2s linear infinite; position: absolute; inset: 0;
        }
        @keyframes roadScroll { 0% { background-position: 0 0; } 100% { background-position: 0 80px; } }
        .lane-divider { border-right: 2px dashed rgba(255,255,255,0.15); }

        @keyframes run-bounce { 0%, 100% { transform: translateY(0) scaleY(1) rotate(-3deg); } 50% { transform: translateY(-12px) scaleY(1.05) rotate(3deg); } }
        .running-avatar { animation: run-bounce 0.35s infinite alternate ease-in-out; }
        @keyframes shadow-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(0.6); opacity: 0.2; } }
        .running-shadow { animation: shadow-pulse 0.35s infinite alternate ease-in-out; background: rgba(0,0,0,0.4); border-radius: 50%; }

        .bubble-letter {
            background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb);
            box-shadow: inset -3px -3px 6px rgba(0,0,0,0.3), inset 3px 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.5);
            border: 2px solid #93c5fd; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        .bad-bubble {
            background: radial-gradient(circle at 30% 30%, #f87171, #dc2626);
            box-shadow: inset -3px -3px 6px rgba(0,0,0,0.3), inset 3px 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.5);
            border: 2px solid #fca5a5; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        @keyframes text-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .animate-text-gradient { background-size: 200% auto; animation: text-gradient 3s linear infinite; }

        .basket-texture { background-color: #d97706; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px); }

        .river-bg { background: linear-gradient(180deg, #7dd3fc 0%, #0284c7 100%); position: relative; overflow: hidden; border-radius: 0.75rem; box-shadow: inset 0 0 20px rgba(0,0,0,0.1); }
        .dark .river-bg { background: linear-gradient(180deg, #0369a1 0%, #082f49 100%); }
        .river-wave { position: absolute; width: 200%; height: 100%; background-image: radial-gradient(circle at 50px 50px, rgba(255,255,255,0.15) 2%, transparent 6%); background-size: 80px 80px; animation: waveFlow 4s linear infinite; }
        @keyframes waveFlow { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(-80px) translateY(80px); } }
        .frog-jump { transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

        @keyframes salda-float { 0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 0 4px rgba(6,182,212,0.4)); } 50% { transform: translateY(-3px) rotate(-10deg); filter: drop-shadow(0 0 12px rgba(6,182,212,1)); } }
        .animate-salda-float { animation: salda-float 2s ease-in-out infinite; color: #06b6d4; }

        .coin-spin { animation: coinFlip 2s infinite linear; }
        @keyframes coinFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
        
        .letter-slot { 
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
            border: 2px solid #cbd5e1;
        }
        .dark .letter-slot {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-color: #334155;
        }

        /* Yeni oyunlar için animasyonlar */
        @keyframes fraction-fill { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
        .fraction-fill { animation: fraction-fill 0.5s ease-out forwards; transform-origin: bottom; }

        @keyframes color-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
        .color-pulse { animation: color-pulse 1.5s infinite; }

        @keyframes zit-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
        .zit-bounce { animation: zit-bounce 1s ease-in-out infinite; }

        @keyframes flag-wave { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-5deg); } }
        .flag-wave { animation: flag-wave 2s ease-in-out infinite; }

        @keyframes dogruyanlış-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .dy-pop { animation: dogruyanlış-pop 0.3s ease-out forwards; }

        @keyframes renk-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .renk-spin { animation: renk-spin 3s linear infinite; }

        @keyframes swipe-up-hint {
            0% { transform: translateY(80px) scale(1.1); opacity: 0; }
            15% { transform: translateY(80px) scale(0.9); opacity: 1; }
            70% { transform: translateY(-80px) scale(0.9); opacity: 1; }
            85% { transform: translateY(-80px) scale(1.1); opacity: 0; }
            100% { transform: translateY(-80px) scale(1.1); opacity: 0; }
        }
        .animate-swipe-hint {
            animation: swipe-up-hint 1.5s cubic-bezier(0.25, 1, 0.5, 1) 3 forwards;
            pointer-events: none;
            opacity: 0;
        }
    
        /* --- SPACE INTRO CSS --- */
        .space-bg { background: radial-gradient(circle at 50% 120%, #1e1b4b 0%, #020617 60%, #000000 100%); }
        .star-twinkle { animation: twinkle linear infinite; }
        @keyframes twinkle { 
            0%, 100% { opacity: 0.1; transform: scale(0.8); } 
            50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px rgba(255,255,255,0.8); } 
        }
        .meteor { 
            position: absolute; width: 2px; height: 60px; 
            background: linear-gradient(to bottom, rgba(255,255,255,1), transparent); 
            transform: rotate(45deg); animation: meteor-fall linear infinite; 
        }
        @keyframes meteor-fall { 
            0% { transform: translateY(-200px) translateX(200px) rotate(45deg); opacity: 1; } 
            100% { transform: translateY(1200px) translateX(-1200px) rotate(45deg); opacity: 0; } 
        }
        .floating-astro { animation: float-astro 6s ease-in-out infinite; }
        @keyframes float-astro { 
            0%, 100% { transform: translateY(0px) rotate(-2deg); } 
            50% { transform: translateY(-20px) rotate(2deg); filter: drop-shadow(0 10px 15px rgba(56,189,248,0.4));} 
        }
        /* ----------------------- */

    

/* Yerel paket güvenlik düzeltmeleri */
img { max-width: 100%; }
button { font: inherit; }