/* #effectCanvas,
#gameCanvas,
#fireballCanvas,
#expCanvas {
    width: 100%; 
    height: 64px; 
} */

:root {
    --loadbarTimeItem: 5s;
}

.itemContainer {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 10px; /* Khoảng cách giữa các phần tử */
}
.loadbarTimeItem {
    width: 25px;
    height: 7px;
    background-color: #F44336; /* Màu đỏ */
    border: 1px solid #CCC;
    border-radius: 1.5rem;
    transition: width var(--loadbarTimeItem) linear; /* Hiệu ứng chuyển đổi */
}


/* Hiển thị các item đã lựa chọn */
#showItems {
    display: flex;
    flex-direction: row;
}
#showItems img {
    margin: 0;
    width: 25px;
    height: 25px;
}

/* インターフェースの形成 */
#game-container {
    text-align: center;
}
#battlefield {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
#character-a, #character-b {
    border: 2px solid black;
    padding: 10px;
    background-color: lightgray;
    min-width: 100px;
    text-align: center;
}
#battle-log {
    margin-top: 20px;
    border-top: 1px solid gray;
    padding-top: 10px;
}
/* アニメーションを作成する */
@keyframes move-right {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(150px); /* Di chuyển về phía phải */
    }
    100% {
        transform: translateX(0); /* Trở lại vị trí ban đầu */
    }
}
@keyframes move-left {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-150px); /* Di chuyển về phía trái */
    }
    100% {
        transform: translateX(0); /* Trở lại vị trí ban đầu */
    }
}
.character {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: lightgray;
    text-align: center;
    border: 2px solid black;
}

/* 文字通信表示 */
@keyframes appear-and-fade {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
#attack-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: red;
    animation: appear-and-fade 2s;
}