/* Zaman Kahramanları - yerel oyun stilleri */
@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, #root { width: 100%; height: 100%; }
body, button, input, select, textarea, * { 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));} 
        }
        /* ----------------------- */


        /* =========================================================
           İLD ORTAK SEÇİM ARAYÜZÜ DÜZELTMESİ
           - Mobilde oyuncu seçiminde yalnızca 1 Öğrenci + Yapay Zeka görünür
           - Seçenek kartlarındaki küçük detay yazıları temizlenir
           - Seçim ekranları tüm oyunlarda ortak, sade ve taşmasız görünür
           ========================================================= */
        .ild-choice-grid { align-items: stretch; }
        .ild-card-clean { min-width: 0; }
        .ild-card-clean .ild-card-detail { display: none !important; }
        @media (max-width: 767px) {
          .ild-select-screen {
            min-height: 100dvh !important;
            height: auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            justify-content: flex-start !important;
            padding-top: 5.25rem !important;
            padding-bottom: 2rem !important;
          }
          .ild-select-title {
            margin-top: 0 !important;
            font-size: clamp(2.05rem, 8.8vw, 3.25rem) !important;
            line-height: 1.08 !important;
            max-width: 92vw !important;
          }
          .ild-choice-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 1rem !important;
            width: 100% !important;
            max-width: 92vw !important;
          }
          .ild-card-clean {
            width: 100% !important;
            max-width: none !important;
            height: 10.5rem !important;
            padding: 0.85rem !important;
            gap: 0.35rem !important;
          }
          .ild-card-clean .text-5xl,
          .ild-card-clean .text-6xl,
          .ild-card-clean .text-7xl {
            font-size: clamp(3rem, 15vw, 4.35rem) !important;
            line-height: 1 !important;
          }
          .ild-card-clean .text-xl,
          .ild-card-clean .text-2xl,
          .ild-card-clean .text-3xl,
          .ild-card-clean .text-4xl {
            font-size: clamp(1.15rem, 5.2vw, 1.75rem) !important;
            line-height: 1.1 !important;
          }
          .ild-hide-mobile-player { display: none !important; }
          .ild-player-choice-grid {
            grid-template-columns: minmax(0, 1fr) !important;
            max-width: 72vw !important;
          }
          .ild-player-choice-grid .ild-card-clean {
            height: 12.5rem !important;
          }
          .ild-difficulty-choice-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          }
          .ild-difficulty-choice-grid .ild-card-clean {
            height: 9.5rem !important;
          }
          .ild-question-count-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          }
        }
        @media (min-width: 768px) {
          .ild-hide-mobile-player { display: flex !important; }
        }


        /* FINAL MOBİL SEÇİM EKRANI BOYUT DÜZELTMESİ
           Oyun içi ekrana dokunmaz; sadece sınıf/zorluk/soru sayısı gibi seçim ekranlarını etkiler. */
        @media (max-width: 767px) {
          .ild-select-screen {
            padding-top: 5.8rem !important;
          }
          .ild-select-screen .ild-select-title {
            font-size: clamp(2.35rem, 9.7vw, 3.6rem) !important;
            line-height: 1.06 !important;
            letter-spacing: -0.02em !important;
          }
          .ild-select-screen > p {
            font-size: clamp(1.08rem, 4.8vw, 1.55rem) !important;
            line-height: 1.22 !important;
            max-width: 90vw !important;
            margin-top: 0.55rem !important;
          }
          .ild-card-clean .text-xl,
          .ild-card-clean .text-2xl,
          .ild-card-clean .text-3xl,
          .ild-card-clean .text-4xl {
            font-size: clamp(1.35rem, 6.1vw, 2.05rem) !important;
            line-height: 1.08 !important;
          }
          .ild-card-clean .text-sm,
          .ild-card-clean .text-base,
          .ild-card-clean .text-lg {
            font-size: clamp(1rem, 4.5vw, 1.45rem) !important;
            line-height: 1.12 !important;
          }
          .ild-top-controls {
            top: 0.75rem !important;
            right: 0.75rem !important;
            gap: 0.55rem !important;
          }
          .ild-top-control-btn {
            width: 3.25rem !important;
            height: 3.25rem !important;
            padding: 0.78rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
          }
          .ild-top-control-icon {
            width: 1.65rem !important;
            height: 1.65rem !important;
          }
          .ild-question-count-grid {
            gap: 1rem !important;
            max-width: 92vw !important;
          }
          .ild-question-count-card {
            width: 8.75rem !important;
            height: 8.75rem !important;
            padding: 1.35rem !important;
          }
          .ild-question-count-card .ild-question-count-number {
            font-size: clamp(2.75rem, 13.5vw, 4.15rem) !important;
          }
          .ild-question-count-card .ild-question-count-label {
            font-size: clamp(1.18rem, 5.3vw, 1.75rem) !important;
          }
        }