/* CSS for First Letter Game - QWERTY Version */
#game-screen{display:flex;flex-direction:column;align-items:center;gap:20px}
#game-area{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;max-width:270px}
#game-image-wrapper{width:100%;background-color:#f0f4f8;border-radius:15px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#game-image-wrapper img{width:100%;height:100%;object-fit:contain}
#word-display-area{font-size:3em;font-weight:700;letter-spacing:8px;color:#142a5a;font-family:'Poppins',sans-serif;text-transform:uppercase}

/* CSS mới cho bàn phím QWERTY */
#alphabet-container{
    width:100%;
    max-width:700px;
    margin-top:10px;
    display:flex; /* Dùng flexbox để tạo các hàng */
    flex-direction:column; /* Các hàng xếp chồng lên nhau */
    align-items:center; /* Căn giữa các hàng */
    gap: 8px; /* Khoảng cách giữa các hàng */
}
.keyboard-row{
    display:flex; /* Mỗi hàng cũng là một flex container */
    justify-content:center; /* Căn giữa các phím trong hàng */
    gap: 6px; /* Khoảng cách giữa các phím */
}

.letter-btn{
    width: 50px; /* Chiều rộng cố định cho mỗi phím */
    height: 50px;
    font-size:1.5em;
    font-weight:700;
    font-family:'Fredoka One',cursive;
    color:#333;
    background-color:#fff;
    border:2px solid #ddd;
    border-radius:8px; /* Bo góc ít hơn cho giống phím thật */
    cursor:pointer;
    transition:all .2s ease;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}
.letter-btn:hover:not(:disabled){background-color:#ffde59;transform:scale(1.1)}
.letter-btn:disabled{opacity:.4;cursor:not-allowed}
.letter-btn.correct{background-color:#28a745;color:#fff;border-color:#28a745}
.letter-btn.incorrect{background-color:#dc3545;color:#fff;border-color:#dc3545}

/* Responsive cho mobile */
@media (max-width:600px){
    .letter-btn {
        width: 38px;
        height: 42px;
        font-size: 1.1em;
    }
    .keyboard-row { gap: 4px; }
}
@media (max-width:480px){
    .letter-btn {
        width: 28px;
        height: 36px;
    }
}