/* T4: Tìm Từ Tiếng Anh - Style */


h1, h2, h3 { font-family: 'Baloo 2', cursive; color: #00796B; }



.back-btn {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
    color: #00897B; background: #fff; padding: 8px 16px; border-radius: 99px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); align-self: flex-start; margin-bottom: 5px;
    transition: transform 0.2s;
}
.back-btn:active { transform: scale(0.95); }

.game-header { text-align: center; margin-bottom: 10px; }
.game-header h1 { font-size: 2.2rem; margin-bottom: 5px; text-shadow: 2px 2px 0 #FFF;}
.game-header p { font-size: 1.1rem; color: #00796B; margin-bottom: 5px;}

.score-board {
    display: inline-block; padding: 6px 20px; border-radius: 99px; font-weight: 800; font-size: 1.2rem;
    background: #FFD54F; color: #E65100; box-shadow: 0 4px 0px #FFB300;
}
.pop-text.pop { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Vùng Game chia 2 cột (Desk) hoặc theo dọc (Mobile) */
.game-area {
    flex: 1; display: flex; gap: 20px; position: relative;
    /* justify-content: space-between; */
    align-items: center; justify-content: center; flex-wrap: wrap;
}

/* Panel chứa Words */
.word-list-panel {
    background: #ffffff; padding: 20px; border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); min-width: 250px;
    border: 3px dashed #80CBC4;
}

.word-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;}
.word-item {
    font-size: 1.4rem; font-family: 'Baloo 2', cursive; color: #37474F;
    padding: 8px 15px; border-radius: 10px; background: #F1F8E9;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    transition: all 0.3s; display: flex; justify-content: space-between;
}

.word-item.found {
    text-decoration: line-through; opacity: 0.5; background: #E0E0E0;
}

/* Lưới chữ cái */
.grid-container {
    position: relative; background: white; padding: 15px; border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); border: 5px solid #4DB6AC;
    max-width: 100%; touch-action: none;
}

/* Canvas vẽ đường nối đè lên lưới chữ, nhưng pointer-events: none để event qua dc lưới */
#selection-canvas {
    position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px);
    z-index: 10; pointer-events: none;
}

.letter-grid {
    display: grid;
    /* Dùng JS setup grid template columns tùy matrix size 8x8 hoặc 10x10 */
    gap: 2px; position: relative; z-index: 5;
}

.letter-cell {
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 900; color: #263238; font-family: 'Nunito', sans-serif;
    text-transform: uppercase; cursor: pointer; border-radius: 8px; transition: background 0.1s;
    user-select: none;
}

.letter-cell:hover { background: #E8F5E9; }

/* Trạng thái chữ cái */
.letter-cell.selected {
    background: #FFCA28; color: #BF360C; transform: scale(1.1); box-shadow: 0 4px 0 #FF8F00; z-index: 20; position: relative;
}
.letter-cell.found {
    background: #81C784; color: white;
}
.letter-cell.selected.found {
    background: #FFA000; /* Nếu giao qua từ đã tìm mà đang chọn đè lên */
}

/* Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1000;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-content {
    background: white; padding: 40px; border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); transform: scale(0.8); transition: transform 0.3s;
    max-width: 90%; width: 400px;
}
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-icon { font-size: 5rem; margin-bottom: 10px; animation: popIn 1s infinite alternate;}
.btn-primary { background: #00897B; color: white; border: none; padding: 12px 30px; font-size: 1.2rem; font-family: 'Baloo 2', cursive; border-radius: 99px; cursor: pointer; box-shadow: 0 6px 0px #00695C; margin: 5px; }
.btn-secondary { display: inline-block; background: #E2E8F0; color: #4A5568; margin: 5px; border: none; padding: 12px 30px; font-size: 1.2rem; font-family: 'Baloo 2', cursive; border-radius: 99px; cursor: pointer; box-shadow: 0 6px 0px #CBD5E0; }

@keyframes popIn { 0%{transform: scale(1);} 50%{transform: scale(1.5);} 100%{transform: scale(1);} }

/* Mobile view nhồi cho vừa */
@media (max-width: 600px) {
    .word-list { flex-direction: row; flex-wrap: wrap; }
    .word-item { font-size: 1rem; padding: 5px 10px; }
    .word-list-panel { min-width: 100%; padding: 10px; margin-bottom: 0px;}
    .letter-cell { width: 32px; height: 32px; font-size: 1.2rem; }
    .game-header h1 { font-size: 1.8rem; }
    .game-header p { display: none; /* Ẩn bớt text thừa */ }
    .game-area { flex-direction: column; gap: 10px; }
}