/* Fix Overlapping Content */

.letter-card {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.letter-card > * {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.alphabet-grid {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Prevent text overflow */
.letter-word, .letter-sound {
    font-size: 0.35rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.letter-large, .letter-small {
    line-height: 0.8 !important;
    margin: 0 !important;
}

.letter-emoji {
    line-height: 0.8 !important;
    margin: 1px 0 !important;
}

/* Better hover effects for letter cards */
.letter-card:hover {
    background: rgba(255,255,255,0.25) !important;
    transform: scale(1.05) !important;
    border-color: rgba(255,255,255,0.4) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Tab buttons styling improvements */
.abc-learning-game button[id$="-tab"] {
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.abc-learning-game button[id$="-tab"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Mode buttons styling */
.abc-learning-game button[id$="-mode"] {
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.abc-learning-game button[id$="-mode"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
}

/* Better spacing for control buttons */
.abc-learning-game .control-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}

/* Improved section visibility */
.abc-learning-game #alphabets-section,
.abc-learning-game #numbers-section,
.abc-learning-game #colors-section,
.abc-learning-game #shapes-section {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Better text contrast */
.letter-card .letter-large,
.letter-card .letter-small,
.letter-card .letter-word {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}

.letter-card .letter-sound {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* Loading animation for better UX */
.abc-learning-game .loading {
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile fixes */
@media (max-width: 768px) {
    .letter-card {
        min-height: 80px !important;
        max-height: 80px !important;
        padding: 8px !important;
    }
    
    .letter-large {
        font-size: 1.8rem !important;
    }
    
    .letter-small {
        font-size: 1.2rem !important;
    }
    
    .letter-emoji {
        font-size: 1.4rem !important;
    }
    
    .letter-word {
        font-size: 0.8rem !important;
    }
    
    .letter-sound {
        font-size: 0.6rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .alphabet-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .letter-card {
        min-height: 110px !important;
        padding: 8px 6px !important;
    }
    
    .letter-large {
        font-size: 1.8rem !important;
    }
    
    .letter-small {
        font-size: 1.3rem !important;
    }
    
    .letter-emoji {
        font-size: 1.4rem !important;
    }
}

/* Better scrollbar for desktop */
@media (min-width: 769px) {
    .alphabet-grid::-webkit-scrollbar {
        width: 8px;
    }
    
    .alphabet-grid::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
        border-radius: 4px;
    }
    
    .alphabet-grid::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 4px;
    }
    
    .alphabet-grid::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.5);
    }
}

/* Enhanced green blink animation */
@keyframes greenBlink {
    0%, 100% { 
        background: rgba(255,255,255,0.15); 
        transform: scale(1); 
        border-color: rgba(255,255,255,0.2);
    }
    25% { 
        background: #4CAF50; 
        transform: scale(1.1); 
        border-color: #45a049;
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
    }
    50% { 
        background: #45a049; 
        transform: scale(1.15); 
        border-color: #4CAF50;
        box-shadow: 0 0 30px rgba(76, 175, 80, 0.8);
    }
    75% { 
        background: #4CAF50; 
        transform: scale(1.1); 
        border-color: #45a049;
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
    }
}

/* Success feedback styling */
.success-feedback {
    color: #4CAF50 !important;
    font-weight: bold !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    animation: successPulse 0.6s ease-in-out !important;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Better focus states for accessibility */
.letter-card:focus,
.abc-learning-game button:focus {
    outline: 3px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 2px !important;
}

/* Improved button states */
.abc-learning-game button:active {
    transform: scale(0.98) !important;
}

.abc-learning-game button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}