:root {
    --cursor-pointer: pointer;
    --cursor-not-allowed: not-allowed;
    --cursor-move: move;
    --cursor-target: url(./assets/target.png) 0 0, cell;
    --cursor-grab: grab;
    --cursor-grabbing: grabbing;
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Averia Serif Libre', serif;
}

#title-round {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: lightblue;
}

#game-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding-block: 0.5em;
}

#game-title > img {
    height: 1em; width: 1em;
}

canvas {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#controls > * {
    background-color: lightblue;
    padding-inline: 1em;
    padding-bottom: 1em;
    border-radius: 1em;

    --turn-div-width: 15em;
}

#controls > *:empty {
    display: none;
}

#turn-div {
    position: fixed;
    left: 0;
    top: 0;
    margin: 1em 0 1em 1em;
    max-height: calc(100vh - 3em);
    width: var(--turn-div-width);
    overflow-y: auto;
}

.character {
    display: flex;
    align-items: center;
    /* border: 1px solid; */
    margin: 0.5em;
}

.character > .info {
    padding: 0.25em;
}

.character > img {
    display: block;
    height: 3em;
    aspect-ratio: 1/1;
}

.hp-bar {
    accent-color: green;
}

#stats-div {
    position: fixed;
    left: calc(var(--turn-div-width) + 3em);
    bottom: 0;
    margin: 1em;
    padding: 0;
    width: calc(100vw - var(--turn-div-width) - 3em - 4em);

    display: flex;
    /* column-gap: 1em; */
    overflow-x: auto;
}

#stats-div > * {
    /* padding-block: 1em; */
    padding: 1em;
    max-height: 10em;
}

#stats-div img {
    display: block;
    height: 4em;
    aspect-ratio: 1/1;
}

#stats-div > .image-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    left: 0;
    background-color: inherit;
}

#stats-div > .stats {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* align-items: center; */
}

#stats-div > .actions {
    display: flex;
    justify-content: flex-start;
    align-items:stretch;
    column-gap: .5em;
}

.button {
    border: 2px black outset;
    padding: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('./assets/armour-devourer.png'), var(--cursor-pointer);
    background-color: lightgreen;
}

.button:active {
    border: 2px black inset;
}

.button.disabled {
    border: 2px black groove;
    cursor: var(--cursor-not-allowed);
    background-color: lightcoral;
    text-decoration: line-through;
}