/* ================================================== PLAYER STATS */

#main-display-right {
    width: 45vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 5vh; left: 75%;
    transform: translateX(-50%);
}

#menu-lists {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* ================================================== PLAYER STATS */

#player-stats {
    width: 48%;
    background-color: #fff;
    border: 10px solid var(--black);
    border-radius: 10px;
    padding: 20px;
    transition: .4s;
}

#player-stats > div {
    display: flex;
    justify-content: space-between;
}

#player-stats > div:not(:last-child) {margin-bottom: 5px}

#player-stats .stat {margin-left: 20px}

/* ================================================== BATTLE MENU */

#battle-menu {
    width: 48%;
    padding: 20px;
    background-color: #fff;
    border: 10px solid var(--black);
    border-radius: 10px;
    transition: .4s;
}

#battle-menu:not(.conjure) > li.conjure {display: none}
#battle-menu:not(.scale) > li.scale {display: none}
#battle-menu:not(.move) > li.move {display: none}
#battle-menu:not(.rest) > li.rest {display: none}

#battle-menu, #battle-menu ul {list-style-type: none}

li.conjure {
    border: 1px solid currentColor;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#conjure-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#conjure-menu li {width: 48%}

#battle-menu button {
    margin-bottom: 5px;
    padding: 5px;
}

/* ================================================== DIALOGUE */

#dialogue {
    width: 40vw;
    padding: 20px;
    background-color: #fff;
    border: 10px solid var(--black);
    box-shadow: 10px 10px 0px 0px rgba(25, 30, 24, .4);
    border-radius: 10px;
    position: absolute;
    top: 5vh; left: 5vh;
    transition: .4s;
}

#dialogue p {
    height: 70px;
    margin: 10px 0;
}

#dialogue-buttons {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#dialogue-buttons button:not(:last-child) {margin-right: 10px}

/* ================================================== LEVEL UP */

#level-up {
    padding: 20px;
    background-color: #fff;
    border: 1px solid currentColor;
    text-align: center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    transition: .4s;
}

#level-up h3 {font-size: 24px}

#level-up-options {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

#level-up-options button {padding: 10px}
#level-up-options button:not(:last-child) {margin-right: 20px}
#level-up-options ul {list-style-type: none}
#level-up-options li {margin-bottom: 5px}