@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; }


/* İlkokul Dijital - sınıf tabanlı gece modu düzeltmesi
   Tailwind çıktısı sistem temasına göre üretildiği için oyun içi gece modu düğmesi
   html.dark sınıfı üzerinden ayrıca desteklenir. */
html.dark body,
html.dark .dark\:bg-slate-900 { background-color: #0f172a !important; }
html.dark .dark\:bg-slate-950 { background-color: #020617 !important; }
html.dark .dark\:bg-slate-800 { background-color: #1e293b !important; }
html.dark .dark\:bg-slate-800\/80 { background-color: rgba(30,41,59,.80) !important; }
html.dark .dark\:bg-slate-700 { background-color: #334155 !important; }
html.dark .dark\:bg-black { background-color: #000 !important; }
html.dark .dark\:bg-red-900 { background-color: #7f1d1d !important; }
html.dark .dark\:bg-red-900\/40 { background-color: rgba(127,29,29,.40) !important; }
html.dark .dark\:bg-blue-950\/40 { background-color: rgba(23,37,84,.40) !important; }
html.dark .dark\:bg-green-950\/40 { background-color: rgba(5,46,22,.40) !important; }
html.dark .dark\:bg-orange-950\/40 { background-color: rgba(67,20,7,.40) !important; }
html.dark .dark\:bg-purple-950\/40 { background-color: rgba(59,7,100,.40) !important; }
html.dark .dark\:bg-yellow-950\/40 { background-color: rgba(66,32,6,.40) !important; }
html.dark .dark\:border-slate-600 { border-color: #475569 !important; }
html.dark .dark\:border-slate-700 { border-color: #334155 !important; }
html.dark .dark\:border-blue-600 { border-color: #2563eb !important; }
html.dark .dark\:border-green-600 { border-color: #16a34a !important; }
html.dark .dark\:border-orange-600 { border-color: #ea580c !important; }
html.dark .dark\:border-purple-600 { border-color: #9333ea !important; }
html.dark .dark\:border-yellow-600 { border-color: #ca8a04 !important; }
html.dark .dark\:text-slate-100 { color: #f1f5f9 !important; }
html.dark .dark\:text-slate-400 { color: #94a3b8 !important; }
html.dark .dark\:text-sky-300 { color: #7dd3fc !important; }
html.dark .dark\:text-sky-400 { color: #38bdf8 !important; }
html.dark .dark\:text-cyan-400 { color: #22d3ee !important; }
html.dark .dark\:text-pink-400 { color: #f472b6 !important; }
html.dark .dark\:text-red-400 { color: #f87171 !important; }
html.dark .dark\:text-violet-400 { color: #a78bfa !important; }
html.dark .dark\:text-yellow-400 { color: #facc15 !important; }
html.dark .dark\:text-blue-400 { color: #60a5fa !important; }
html.dark .dark\:text-green-400 { color: #4ade80 !important; }
html.dark .dark\:text-orange-400 { color: #fb923c !important; }
html.dark .dark\:text-purple-400 { color: #c084fc !important; }
html.dark .dark\:shadow-slate-950 { --tw-shadow-color: #020617 !important; }
html.dark .dark\:shadow-red-900 { --tw-shadow-color: #7f1d1d !important; }
html.dark .dark\:from-sky-900 { --tw-gradient-from: #0c4a6e var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, rgb(12 74 110 / 0)), var(--tw-gradient-to) !important; }
html.dark .dark\:to-slate-800 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position) !important; }
html.dark .dark\:hover\:text-slate-200:hover { color: #e2e8f0 !important; }


/* Cebimdeki Paralar - gece modu okunurluk düzeltmesi
   Yalnızca koyu panel üzerinde koyu kalan ürün adı/fiyat gibi metinleri hedefler. */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}
html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}
html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #cbd5e1 !important;
}


/* ILD site tema uyumluluğu: WordPress tema data-bs-theme/dark-mode yapıları */
html[data-bs-theme="dark"] body,
body.dark-mode,
body.theme-dark,
html.theme-dark body {
  color-scheme: dark !important;
}
html[data-bs-theme="dark"] .text-slate-900,
html[data-bs-theme="dark"] .text-slate-800,
html[data-bs-theme="dark"] .text-slate-700,
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-700,
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-800,
body.theme-dark .text-slate-700,
html.theme-dark .text-slate-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-slate-700 {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html[data-bs-theme="dark"] .text-slate-600,
html[data-bs-theme="dark"] .text-slate-500,
body.dark-mode .text-slate-600,
body.dark-mode .text-slate-500,
body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500,
html.theme-dark .text-slate-600,
html.theme-dark .text-slate-500 {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .dark\:text-slate-100,
body.dark-mode .dark\:text-slate-100,
body.theme-dark .dark\:text-slate-100,
html.theme-dark .dark\:text-slate-100 {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}


/* =========================================================
   REFERANS OYUN GECE MODU UYUM KATMANI
   - index(57).html referansındaki gibi class tabanlı dark mode
   - Site teması ve oyun düğmesi aynı sistemi kullanır
   - Sadece renk/okunurluk; yerleşime dokunmaz
   ========================================================= */
html.dark body,
html[data-bs-theme="dark"] body,
body.dark-mode,
body.theme-dark {
  background-color: #020617 !important;
  color-scheme: dark !important;
}
html.dark .dark\:bg-slate-950,
html[data-bs-theme="dark"] .dark\:bg-slate-950,
body.dark-mode .dark\:bg-slate-950,
body.theme-dark .dark\:bg-slate-950 { background-color: #020617 !important; }
html.dark .dark\:bg-slate-900,
html[data-bs-theme="dark"] .dark\:bg-slate-900,
body.dark-mode .dark\:bg-slate-900,
body.theme-dark .dark\:bg-slate-900 { background-color: #0f172a !important; }
html.dark .dark\:bg-slate-800,
html[data-bs-theme="dark"] .dark\:bg-slate-800,
body.dark-mode .dark\:bg-slate-800,
body.theme-dark .dark\:bg-slate-800 { background-color: #1e293b !important; }
html.dark .dark\:bg-slate-800\/80,
html[data-bs-theme="dark"] .dark\:bg-slate-800\/80,
body.dark-mode .dark\:bg-slate-800\/80,
body.theme-dark .dark\:bg-slate-800\/80 { background-color: rgba(30,41,59,.80) !important; }
html.dark .dark\:bg-slate-700,
html[data-bs-theme="dark"] .dark\:bg-slate-700,
body.dark-mode .dark\:bg-slate-700,
body.theme-dark .dark\:bg-slate-700 { background-color: #334155 !important; }
html.dark .dark\:bg-black,
html[data-bs-theme="dark"] .dark\:bg-black,
body.dark-mode .dark\:bg-black,
body.theme-dark .dark\:bg-black { background-color: #000 !important; }
html.dark .dark\:bg-blue-950\/40,
html[data-bs-theme="dark"] .dark\:bg-blue-950\/40,
body.dark-mode .dark\:bg-blue-950\/40,
body.theme-dark .dark\:bg-blue-950\/40 { background-color: rgba(23,37,84,.40) !important; }
html.dark .dark\:bg-orange-950\/40,
html[data-bs-theme="dark"] .dark\:bg-orange-950\/40,
body.dark-mode .dark\:bg-orange-950\/40,
body.theme-dark .dark\:bg-orange-950\/40 { background-color: rgba(67,20,7,.40) !important; }
html.dark .dark\:bg-green-950\/40,
html[data-bs-theme="dark"] .dark\:bg-green-950\/40,
body.dark-mode .dark\:bg-green-950\/40,
body.theme-dark .dark\:bg-green-950\/40 { background-color: rgba(5,46,22,.40) !important; }
html.dark .dark\:bg-yellow-950\/40,
html[data-bs-theme="dark"] .dark\:bg-yellow-950\/40,
body.dark-mode .dark\:bg-yellow-950\/40,
body.theme-dark .dark\:bg-yellow-950\/40 { background-color: rgba(66,32,6,.40) !important; }
html.dark .dark\:text-slate-100,
html[data-bs-theme="dark"] .dark\:text-slate-100,
body.dark-mode .dark\:text-slate-100,
body.theme-dark .dark\:text-slate-100 { color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; }
html.dark .dark\:text-slate-300,
html[data-bs-theme="dark"] .dark\:text-slate-300,
body.dark-mode .dark\:text-slate-300,
body.theme-dark .dark\:text-slate-300 { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; }
html.dark .dark\:text-slate-400,
html[data-bs-theme="dark"] .dark\:text-slate-400,
body.dark-mode .dark\:text-slate-400,
body.theme-dark .dark\:text-slate-400 { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; }
html.dark .dark\:text-blue-400,
html[data-bs-theme="dark"] .dark\:text-blue-400,
body.dark-mode .dark\:text-blue-400,
body.theme-dark .dark\:text-blue-400 { color: #60a5fa !important; -webkit-text-fill-color: #60a5fa !important; }
html.dark .dark\:text-orange-400,
html[data-bs-theme="dark"] .dark\:text-orange-400,
body.dark-mode .dark\:text-orange-400,
body.theme-dark .dark\:text-orange-400 { color: #fb923c !important; -webkit-text-fill-color: #fb923c !important; }
html.dark .dark\:text-green-400,
html[data-bs-theme="dark"] .dark\:text-green-400,
body.dark-mode .dark\:text-green-400,
body.theme-dark .dark\:text-green-400 { color: #4ade80 !important; -webkit-text-fill-color: #4ade80 !important; }
html.dark .dark\:text-yellow-400,
html[data-bs-theme="dark"] .dark\:text-yellow-400,
body.dark-mode .dark\:text-yellow-400,
body.theme-dark .dark\:text-yellow-400 { color: #facc15 !important; -webkit-text-fill-color: #facc15 !important; }
html.dark .dark\:text-sky-300,
html[data-bs-theme="dark"] .dark\:text-sky-300,
body.dark-mode .dark\:text-sky-300,
body.theme-dark .dark\:text-sky-300 { color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; }
html.dark .dark\:text-sky-400,
html[data-bs-theme="dark"] .dark\:text-sky-400,
body.dark-mode .dark\:text-sky-400,
body.theme-dark .dark\:text-sky-400 { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; }
html.dark .dark\:text-red-400,
html[data-bs-theme="dark"] .dark\:text-red-400,
body.dark-mode .dark\:text-red-400,
body.theme-dark .dark\:text-red-400 { color: #f87171 !important; -webkit-text-fill-color: #f87171 !important; }
html.dark .dark\:border-slate-600,
html[data-bs-theme="dark"] .dark\:border-slate-600,
body.dark-mode .dark\:border-slate-600,
body.theme-dark .dark\:border-slate-600 { border-color: #475569 !important; }
html.dark .dark\:border-slate-700,
html[data-bs-theme="dark"] .dark\:border-slate-700,
body.dark-mode .dark\:border-slate-700,
body.theme-dark .dark\:border-slate-700 { border-color: #334155 !important; }
html.dark .text-slate-900,
html.dark .text-slate-800,
html[data-bs-theme="dark"] .text-slate-900,
html[data-bs-theme="dark"] .text-slate-800,
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-800 { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; }
html.dark .text-slate-700,
html[data-bs-theme="dark"] .text-slate-700,
body.dark-mode .text-slate-700,
body.theme-dark .text-slate-700 { color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; }
html.dark .text-slate-600,
html.dark .text-slate-500,
html[data-bs-theme="dark"] .text-slate-600,
html[data-bs-theme="dark"] .text-slate-500,
body.dark-mode .text-slate-600,
body.dark-mode .text-slate-500,
body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500 { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; }

/* Grade selection fix: 3rd and 4th class cards */
.bg-violet-500{background-color:#8b5cf6 !important;}
.shadow-violet-700{--tw-shadow-color:#6d28d9 !important;}
.bg-rose-500{background-color:#f43f5e !important;}
.shadow-rose-700{--tw-shadow-color:#be123c !important;}


/* Money select animation: appear only, no jump/bounce. */
@keyframes ild-money-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.money-appear {
  animation: ild-money-appear 0.18s ease-out both !important;
}


/* Stable selected money rendering: no blink/flicker, no jump. */
.money-appear,
.money-appear * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* Mobile selection layout utilities */
.grid{display:grid !important;}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}

/* Mobile selection screen layout fixes */
.bg-orange-500{background-color:#f59e0b !important;}
.shadow-orange-700{--tw-shadow-color:#b45309 !important;}
@media (max-width: 639px){
  .grid.grid-cols-4 > button, .grid.grid-cols-3 > button { min-width: 0; }
}

/* Selection card layout fix: grade cards 2x2 on mobile, difficulty cards like option cards */
.ild-grade-grid,
.ild-difficulty-grid {
  width: 100%;
  max-width: 80rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.ild-grade-card {
  width: 18rem;
  height: 24rem;
  max-width: 18rem;
  flex: 1 1 14rem;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ild-grade-emoji { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.ild-grade-num { font-size: 4.5rem; line-height: 1; font-weight: 900; }
.ild-grade-label { margin-top: 1rem; font-size: 2.25rem; line-height: 1.1; font-weight: 800; text-align: center; }
.ild-grade-badge { margin-top: 1rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 1.5rem; line-height: 1.1; font-weight: 800; text-align: center; }

.ild-difficulty-card {
  width: 16rem;
  height: 16rem;
  max-width: 16rem;
  flex: 1 1 12rem;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ild-difficulty-icon { width: 4rem; height: 4rem; margin-bottom: 1rem; }
.ild-difficulty-label { font-size: 2.25rem; line-height: 1.1; font-weight: 800; text-align: center; }

.bg-orange-500{background-color:#f59e0b !important;}
.shadow-orange-700{--tw-shadow-color:#b45309 !important;}

@media (max-width: 639px) {
  .ild-grade-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .9rem !important;
    max-width: 20.5rem !important;
  }
  .ild-grade-card {
    width: 100% !important;
    height: 12.25rem !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .8rem .5rem !important;
    border-radius: 1.65rem !important;
  }
  .ild-grade-emoji { font-size: 2rem !important; margin-bottom: .35rem !important; }
  .ild-grade-num { font-size: 3rem !important; }
  .ild-grade-label { margin-top: .45rem !important; font-size: 1.55rem !important; line-height: 1.05 !important; }
  .ild-grade-badge { margin-top: .45rem !important; padding: .15rem .45rem !important; font-size: 1rem !important; line-height: 1.05 !important; }

  .ild-difficulty-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .85rem !important;
    max-width: 21.5rem !important;
  }
  .ild-difficulty-card {
    width: 100% !important;
    height: 8.6rem !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .7rem .4rem !important;
    border-radius: 1.55rem !important;
  }
  .ild-difficulty-icon { width: 2.9rem !important; height: 2.9rem !important; margin-bottom: .65rem !important; }
  .ild-difficulty-label { font-size: 1.35rem !important; line-height: 1.05 !important; }
}


/* --- Panel color utility backfill for Abaküs numpad and panel consistency --- */
.bg-blue-50{background-color:#eff6ff !important;}
.bg-yellow-50{background-color:#fefce8 !important;}
.border-blue-400{border-color:#60a5fa !important;}
.border-orange-400{border-color:#fb923c !important;}
.border-green-400{border-color:#4ade80 !important;}
.text-blue-700{color:#1d4ed8 !important;}
.text-orange-700{color:#c2410c !important;}
.text-green-700{color:#15803d !important;}
.text-yellow-700{color:#a16207 !important;}
.bg-blue-500{background-color:#3b82f6 !important;}
.bg-yellow-500{background-color:#eab308 !important;}
.bg-purple-500{background-color:#a855f7 !important;}
.active\:bg-blue-700:active{background-color:#1d4ed8 !important;}
.active\:bg-orange-700:active{background-color:#c2410c !important;}
.active\:bg-green-700:active{background-color:#15803d !important;}
.active\:bg-yellow-700:active{background-color:#a16207 !important;}
.active\:bg-purple-700:active{background-color:#7e22ce !important;}
.shadow-blue-400{--tw-shadow-color:#60a5fa !important;}
.shadow-orange-400{--tw-shadow-color:#fb923c !important;}
.shadow-green-400{--tw-shadow-color:#4ade80 !important;}
.shadow-yellow-400{--tw-shadow-color:#facc15 !important;}
.shadow-purple-400{--tw-shadow-color:#c084fc !important;}
.shadow-blue-700{--tw-shadow-color:#1d4ed8 !important;}
.shadow-yellow-700{--tw-shadow-color:#a16207 !important;}
.shadow-purple-700{--tw-shadow-color:#7e22ce !important;}
html.dark .dark\:bg-blue-950\/40{background-color:rgba(23,37,84,.40) !important;}
html.dark .dark\:bg-orange-950\/40{background-color:rgba(67,20,7,.40) !important;}
html.dark .dark\:bg-green-950\/40{background-color:rgba(20,83,45,.40) !important;}
html.dark .dark\:bg-yellow-950\/40{background-color:rgba(66,32,6,.40) !important;}
html.dark .dark\:bg-purple-950\/40{background-color:rgba(59,7,100,.40) !important;}
html.dark .dark\:border-blue-600{border-color:#2563eb !important;}
html.dark .dark\:border-orange-600{border-color:#ea580c !important;}
html.dark .dark\:border-green-600{border-color:#16a34a !important;}
html.dark .dark\:border-yellow-600{border-color:#ca8a04 !important;}
html.dark .dark\:border-purple-600{border-color:#9333ea !important;}
html.dark .dark\:text-blue-400{color:#60a5fa !important;}
html.dark .dark\:text-orange-400{color:#fb923c !important;}
html.dark .dark\:text-green-400{color:#4ade80 !important;}
html.dark .dark\:text-yellow-400{color:#facc15 !important;}
html.dark .dark\:text-purple-400{color:#c084fc !important;}
html.dark .dark\:shadow-blue-600{--tw-shadow-color:#2563eb !important;}
html.dark .dark\:shadow-orange-600{--tw-shadow-color:#ea580c !important;}
html.dark .dark\:shadow-green-600{--tw-shadow-color:#16a34a !important;}
html.dark .dark\:shadow-yellow-600{--tw-shadow-color:#ca8a04 !important;}
html.dark .dark\:shadow-purple-600{--tw-shadow-color:#9333ea !important;}

/* Abaküs çerçeve - light/dark mode */
.abacus-frame {
    border-color: rgba(146,64,14,.7);
    background: linear-gradient(180deg, #fefce8 0%, #fef3c7 50%, #fef9c3 100%);
    box-shadow: 0 10px 26px rgba(120,53,15,.16), inset 0 2px 0 rgba(255,255,255,.95);
}
html.dark .abacus-frame {
    border-color: rgba(251,191,36,.4);
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}


/* Abaküs basamak değeri önizleme alanı - gece modu okunurluk düzeltmesi */
.abacus-place-preview {
    color: #1f2937;
    background: rgba(255,255,255,.88);
}
html.dark .abacus-place-preview,
html[data-bs-theme="dark"] .abacus-place-preview,
body.dark-mode .abacus-place-preview,
body.theme-dark .abacus-place-preview,
html.theme-dark .abacus-place-preview {
    color: #f8fafc !important;
    background: rgba(15,23,42,.92) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.28) !important;
}