/* css/trangbi.css (Phiên bản cải tiến thẩm mỹ và responsive) */

/* Vùng chứa chính của bảng trang bị */
.equipped-container {
    padding: 20px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- TIÊU ĐỀ --- */
.equipped-title-decorator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: #999;
}

.equipped-title-decorator .text {
    font-family: 'Cinzel', serif; /* Sử dụng font đặc biệt nếu có */
    font-size: 1.1em; /* Tăng nhẹ kích thước cho rõ ràng */
    letter-spacing: 1.5px;
    text-transform: uppercase; /* In hoa để tạo điểm nhấn */
    margin: 0 20px;
    white-space: nowrap;
    color: #E48F45; /* Đồng bộ màu với theme chính */
}

.equipped-title-decorator .line {
    height: 1px;
    width: 100%;
    /* Sử dụng màu gradient hài hòa hơn với theme */
    background: linear-gradient(to right, transparent, rgba(228, 143, 69, 0.4), transparent);
}

/* --- LƯỚI TRANG BỊ --- */
.equipped-grid {
    display: grid;
    /* Sử dụng auto-fit và minmax để lưới tự động điều chỉnh số cột */
    /* - Màn hình lớn: nhiều cột hơn */
    /* - Màn hình nhỏ: tự động xuống 2 hoặc 1 cột */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px; /* Tăng khoảng cách cho thoáng */
}

/* --- Ô TRANG BỊ (SLOT) --- */
.equipment-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Căn từ trên xuống */
    background-color: rgba(25, 25, 25, 0.7); /* Màu nền tối hơn, đồng bộ */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* Bo góc lớn hơn cho mềm mại */
    padding: 15px 10px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    min-height: 120px; /* Tăng chiều cao tối thiểu để chứa nội dung tốt hơn */
    cursor: pointer;
    text-align: center; /* Căn giữa toàn bộ nội dung bên trong */
}

.equipment-slot:hover {
    background-color: rgba(40, 40, 40, 0.9);
    transform: translateY(-3px); /* Hiệu ứng nhấc lên khi hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Nhãn của ô (ví dụ: Thần Binh) - hiển thị khi ô trống */
.slot-label {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Chữ "Trống" - hiển thị khi ô trống */
.placeholder-text {
    color: #777;
    font-style: italic;
    font-size: 0.85em;
}

/* --- VẬT PHẨM ĐÃ TRANG BỊ --- */

/* Vùng hiển thị icon và tên vật phẩm (mặc định ẩn) */
.item-display {
    display: none; /* Sẽ được hiển thị khi có class .equipped */
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và tên */
    width: 100%;
}

.item-display img {
    width: 52px; /* Tăng kích thước icon */
    height: 52px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 5px; /* Thêm khoảng đệm dưới icon */
}

.item-name {
    font-weight: bold;
    font-size: 1em; /* Kích thước chữ vừa phải */
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Sử dụng toàn bộ chiều rộng của cha */
    padding: 0 5px; /* Thêm padding để tên không bị dính vào cạnh */
    box-sizing: border-box; /* Quan trọng để padding không làm tăng kích thước */
}

/* Logic hiển thị/ẩn các thành phần */

/* Khi ô có trang bị (.equipped) */
.equipment-slot.equipped .item-display {
    display: flex; /* Hiển thị thông tin vật phẩm */
}

.equipment-slot.equipped .slot-label,
.equipment-slot.equipped .placeholder-text {
    display: none; /* Ẩn nhãn và chữ "Trống" */
}


/* --- Ô THÚ CƯỠI (NẾU CÓ) --- */
/* Ô này sẽ chiếm toàn bộ chiều rộng của lưới */
.mount-slot-container {
    /* Cho phép ô này kéo dài ra toàn bộ các cột của grid */
    grid-column: 1 / -1;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(228, 143, 69, 0.4);
}