<<<<<<< HEAD
/* ========================================
   RESPONSIVE FIX - CHỈ FIX FONT, KHÔNG ĐỘNG LAYOUT
   ======================================== */

/* Fix font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Đảm bảo font family được load */
body,
button,
input,
select,
textarea {
    font-family: 'Nunito', 'Baloo 2', 'Arial', sans-serif !important;
}

/* ========================================
   FIX CHỮ - KHÔNG ĐỘNG VÀO POSITION/LAYOUT
   ======================================== */

/* Fix chữ trong draggable letters - CHỈ FONT */
.draggable-letter {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    color: #8B4513 !important;
    /* KHÔNG động vào position, display, width, height */
}

/* Fix chữ trong letter slots - CHỈ FONT */
.letter-slot {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    /* KHÔNG động vào position, display, width, height */
}

.letter-slot.filled {
    color: #333 !important;
}

/* Fix chữ trong buttons */
button {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

/* Fix nav text */
.nav-info {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 600 !important;
    color: white !important;
}

/* ========================================
   FIX CONTAINER OVERFLOW - QUAN TRỌNG NHẤT!
   ======================================== */

/* Fix letters pool để KHÔNG crop chữ */
.letters-pool {
    overflow: visible !important;
    min-height: 160px !important;
    height: auto !important;
}

/* Fix play area */
.play-area {
    overflow: visible !important;
}

/* Fix letters area */
.letters-area {
    overflow: visible !important;
}

/* Mobile - Đảm bảo letters pool không bị crop */
@media (max-width: 768px) {
    .letters-pool {
        overflow: visible !important;
        min-height: 150px !important;
        height: auto !important;
        padding-bottom: 25px !important;
    }

    .play-area {
        overflow: visible !important;
        padding-bottom: 25px !important;
    }
}

@media (max-width: 480px) {
    .letters-pool {
        overflow: visible !important;
        min-height: 140px !important;
        height: auto !important;
        padding-bottom: 20px !important;
    }

    .play-area {
        overflow: visible !important;
        padding-bottom: 20px !important;
    }
}

/* ========================================
   FIX TEXT VISIBILITY
   ======================================== */

/* Đảm bảo text không bị ẩn */
.draggable-letter,
.letter-slot,
.letter-slot.filled {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix emoji rendering */
.emoji,
.icon {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
=======
/* ========================================
   RESPONSIVE FIX - CHỈ FIX FONT, KHÔNG ĐỘNG LAYOUT
   ======================================== */

/* Fix font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Đảm bảo font family được load */
body,
button,
input,
select,
textarea {
    font-family: 'Nunito', 'Baloo 2', 'Arial', sans-serif !important;
}

/* ========================================
   FIX CHỮ - KHÔNG ĐỘNG VÀO POSITION/LAYOUT
   ======================================== */

/* Fix chữ trong draggable letters - CHỈ FONT */
.draggable-letter {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    color: #8B4513 !important;
    /* KHÔNG động vào position, display, width, height */
}

/* Fix chữ trong letter slots - CHỈ FONT */
.letter-slot {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    /* KHÔNG động vào position, display, width, height */
}

.letter-slot.filled {
    color: #333 !important;
}

/* Fix chữ trong buttons */
button {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

/* Fix nav text */
.nav-info {
    font-family: 'Nunito', 'Arial', sans-serif !important;
    font-weight: 600 !important;
    color: white !important;
}

/* ========================================
   FIX CONTAINER OVERFLOW - QUAN TRỌNG NHẤT!
   ======================================== */

/* Fix letters pool để KHÔNG crop chữ */
.letters-pool {
    overflow: visible !important;
    min-height: 160px !important;
    height: auto !important;
}

/* Fix play area */
.play-area {
    overflow: visible !important;
}

/* Fix letters area */
.letters-area {
    overflow: visible !important;
}

/* Mobile - Đảm bảo letters pool không bị crop */
@media (max-width: 768px) {
    .letters-pool {
        overflow: visible !important;
        min-height: 150px !important;
        height: auto !important;
        padding-bottom: 25px !important;
    }

    .play-area {
        overflow: visible !important;
        padding-bottom: 25px !important;
    }
}

@media (max-width: 480px) {
    .letters-pool {
        overflow: visible !important;
        min-height: 140px !important;
        height: auto !important;
        padding-bottom: 20px !important;
    }

    .play-area {
        overflow: visible !important;
        padding-bottom: 20px !important;
    }
}

/* ========================================
   FIX TEXT VISIBILITY
   ======================================== */

/* Đảm bảo text không bị ẩn */
.draggable-letter,
.letter-slot,
.letter-slot.filled {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix emoji rendering */
.emoji,
.icon {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
>>>>>>> 24c03eda35bab541d2f3fd43d47c2f7b5555ba3f
}