/* Hide fullscreen popup message */
*:fullscreen::backdrop {
    background: transparent !important;
}

/* Hide browser fullscreen notification */
:fullscreen {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Prevent fullscreen popup */
*::-webkit-full-screen-ancestor {
    display: none !important;
}

*::-webkit-full-screen {
    background: transparent !important;
}

/* Hide fullscreen controls */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Additional fullscreen fixes */
#gameModal:fullscreen,
#gameModal:-webkit-full-screen,
#gameModal:-moz-full-screen,
#gameModal:-ms-fullscreen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
}

/* Better element positioning in fullscreen */
#gameModal:fullscreen .abc-learning-game,
#gameModal:-webkit-full-screen .abc-learning-game,
#gameModal:-moz-full-screen .abc-learning-game {
    padding-top: 60px !important;
    height: 100vh !important;
    width: 100vw !important;
}

#gameModal:fullscreen .alphabet-grid,
#gameModal:-webkit-full-screen .alphabet-grid,
#gameModal:-moz-full-screen .alphabet-grid {
    padding-top: 20px !important;
}

/* Fullscreen for all learning activities */
#gameModal:fullscreen .abc-center,
#gameModal:fullscreen .colors-learning,
#gameModal:fullscreen .shapes-learning,
#gameModal:-webkit-full-screen .abc-center,
#gameModal:-webkit-full-screen .colors-learning,
#gameModal:-webkit-full-screen .shapes-learning {
    height: 100vh !important;
    width: 100vw !important;
    padding: 40px !important;
}

/* Subtle fullscreen improvements */
#gameModal:fullscreen .letter-card {
    min-height: 120px !important;
    padding: 12px 8px !important;
}

#gameModal:fullscreen .letter-large {
    font-size: 2.2rem !important;
}

#gameModal:fullscreen .letter-small {
    font-size: 1.6rem !important;
}

#gameModal:fullscreen .letter-emoji {
    font-size: 1.8rem !important;
}

#gameModal:fullscreen .letter-word {
    font-size: 1rem !important;
}

#gameModal:fullscreen .letter-sound {
    font-size: 0.8rem !important;
}

#gameModal:fullscreen .alphabet-grid {
    gap: 15px !important;
    padding: 25px !important;
}

/* Fallback fullscreen styles */
.fallback-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.fallback-fullscreen .abc-learning-game,
.fallback-fullscreen .abc-center,
.fallback-fullscreen .colors-learning,
.fallback-fullscreen .shapes-learning {
    height: 100vh !important;
    width: 100vw !important;
    padding: 40px !important;
}

/* Mobile fullscreen adjustments */
@media (max-width: 768px) {
    #gameModal:fullscreen .letter-card,
    .fallback-fullscreen .letter-card {
        min-height: 80px !important;
        padding: 8px 4px !important;
    }
    
    #gameModal:fullscreen .letter-large,
    .fallback-fullscreen .letter-large {
        font-size: 1.4rem !important;
    }
    
    #gameModal:fullscreen .letter-small,
    .fallback-fullscreen .letter-small {
        font-size: 1rem !important;
    }
    
    #gameModal:fullscreen .letter-emoji,
    .fallback-fullscreen .letter-emoji {
        font-size: 1.1rem !important;
    }
    
    #gameModal:fullscreen .letter-word,
    .fallback-fullscreen .letter-word {
        font-size: 0.6rem !important;
    }
    
    #gameModal:fullscreen .letter-sound,
    .fallback-fullscreen .letter-sound {
        font-size: 0.5rem !important;
    }
}