/* CSS for Listening Quiz */

#game-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* THAY ĐỔI BẮT ĐẦU TỪ ĐÂY */

/* Biến #game-header thành một flex container */
.game-header {
    display: flex;
    justify-content: space-between; /* Đẩy Score và Số câu hỏi ra 2 bên */
    align-items: center; /* Căn giữa theo chiều dọc */
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

#audio-player-wrapper {
    display: flex; /* Biến khu vực này thành flex container */
    justify-content: center; /* Căn giữa các item bên trong */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 20px; /* Tạo khoảng cách giữa "Listen carefully" và nút Play */
    width: 100%;
    margin-bottom: 10px;
}

#audio-player-wrapper p {
    font-size: 1.2em;
    color: #3b508c;
    font-family: 'Poppins', sans-serif;
    margin: 0; /* Xóa margin mặc định của thẻ <p> */
}

#replay-audio-button {
    background: #17a2b8;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1em;
    padding: 10px 25px;
    margin-top: 0; /* Xóa margin-top */
    flex-shrink: 0; /* Ngăn nút bị co lại khi không đủ không gian */
}
#replay-audio-button:hover {
    background: #138496;
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.5);
}

/* KẾT THÚC THAY ĐỔI */


#image-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 600px;
}

.image-option-card {
    aspect-ratio: 1 / 1;
    background-color: white;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    border: 4px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.image-option-card:hover {
    transform: translateY(-5px);
    border-color: #ffc107;
}

.image-option-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 5px;
}

/* States for cards after selection */
.image-option-card.reveal.correct {
    border-color: #28a745;
    background-color: #e9f7ef;
    transform: scale(1.05);
}

.image-option-card.reveal.incorrect {
    border-color: #dc3545;
    background-color: #fbe9eb;
    opacity: 0.6;
}

.image-option-card.disabled {
    pointer-events: none;
}

/* Responsive for mobile */
@media (max-width: 600px) {
    #image-options-grid {
        gap: 10px;
    }
}