.parent-window {
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.window {
    background-color: #663931;
    border: 8px solid #000;
    overflow-y: auto;
    box-shadow: 10px 10px 10px #000;
}
.close-btn {
    border-bottom: 8px solid #000;
    position: absolute;
    display: block;
    width: 8vh;
    height: 8vh;
    padding: 0;
}
.hero-card {
    aspect-ratio: 10/16;
    width: 20vmin;
    height: 27vmin;
    background-color: #663931;
    border: 8px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 3vh;
    background-size: cover;
}
.hero-img {
    border: solid #000;
    margin: 10px;
    padding: 5px 5px 0 5px;
    width: 50%;
    background-color: #cfcfcf;
}
.coin {
    width: 3vh;
    height: 3vh;
    margin: 0 10px 0 10px;
}
.roll {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAKNJREFUWIXVlLsNwCAMBU06VmApZmUOBnJJqkikQEKWP8/XJTSW3ulKa20REdVaiZlpjEE7vffft/f7Q+DkOZCZI+84Uuaca//xOYHiZJ6JUTkeiOJkue1glJN5J0bhuoNRToo76OVknolREXfQy0m1Dlo5mXdiFNQ6aOWkWQe1nMwzMSpmHdRy0q2DUifzToyCWwelToZ18NbJPBOjEtbBWydfiq700TuosBQAAAAASUVORK5CYII=);
    background-size: cover;
}
.roll-text {
    color: #fff;
    text-shadow: 5px 5px 5px #000;
    font-size: 5vh;
    margin-bottom: 5vh;
}
.quest {
    height: 100%;
    font-size: 5vh;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABkCAYAAABNcPQyAAAAAXNSR0IArs4c6QAABERJREFUeJztm6t2VTEQhnMoAsMzYKqqWKs1NV14isIjkCgehSeoqENUgUbUVHBqq2owvACCmi5Q6Trd3UlmkplcJv/nSvclyZeZJLPp5u3Pv/8cMMuz1g0AukCwcZ5rPPT70Ysn/3a6vdN4FUggKnhN7PJ3EF0XMcExucvrrEumjoVz+hNeZA3mdCjn+pHobSyKIjjVuO3tvTva3wveaymSe520ZMHcDmxv70nPbCl5t0+57ehVrCcpOKcDFLm9wZUtJVZ7gm9ilaxSuaH0vKRFFHP7drq9E4/WGv0ObrJyUnKO3FHQSMU10vtqig69mJp6uXKtnJH9+FD67zegMckS48HaRWtHZatNl0Tm4cqlIDHxVUqVJSxndA3hR/t7D4O+NvheWkqMVgCUTPzVTVZvW38NybE+ck8BOWI5WaOk/90JjhVHpEVT+xkSXhKx1GeW9rmrFF37/Ew9+mik3lqnjKG+B2tklp537hJtCxY6WqRp6k5UU0oP+w/J/nWRonsqkFAHV2siSE/eoOCc0lzJGtpaLJddERKytbJStBbtXJ2PDVy5Pa+bzvX1wT8p2Lk+1qVdehe8JDR+NfpBWoM1vqTMRMsJSd5k+Ubmis7pJP53ZjmkFA3GZahCB+ADwcaBYONAsHEg2DgQbBwINg4EGweCjdPF9+Acjr99cc45d/XuM+tnD/c+//NoIIKNA8HGGfZjwzLlaoMUDbpk2Aj2aEfyqJHrQQQbZ/gI9khH8uiR60EEG8dMBHtKI9lK5HqmiuCz8wt3dn7RuhlVmUbwrtiZJE8jeFYg2DgQbJxhPxdy+fjhfesmNAERbBwINg4EG2cqwSh0GAaFDmASCDYOBBsHhQ7jIIKNA8HGgWDjTCUYhQ7DoNABTALBxpnmHNySV3+Oydf+enkl+u5pBNcqdHBkpu6XkD2NYE1KpaaeWyIagjPQEpp6X45oCCZQW2iIHNEQHKEXsUs4oiF4Qa9S16BsyIoFxwZEesuvxe83X1s3oZhQVCcFl8xo6S2/JBJSr29O2PccHlwWvzfGUnRQsHSqWnteTemSUborliPs+ubk4V7ufdz3+fF+9AfgI60/LciRk3qWJ/TM0nduPv14beov/LWQlBt6tufw4FLsfRDcIZKTibSLpmwmYo2hNpiatqwj2W+RCC6dAP4ZswrVRKTQUSom57gRuqfmJBlhUjavZHHXm9SRIfcIw0FzwyVNdcFrkUdZvynXLn9PlR0TtozSkeQ6N9EuOrYMcCZY6vreiAquke5mJrX3UDkmhQ7duREAnsJdOijXhngUwaOtL6NRMr652fRJBENuGVqZLrR5TD07e5OFaB+D7GOSFzviRkyi8jYKYsekHiKaUxHj1MVHli1+Di6pTFGpPeC1PoJolF/VCh2hCCgtHLTOFBKRzRFZ+r4qlSwr6a4luVlkmlKlJTgB0/xrEuDDyYL4+2Dj/Ad6s0aaB6U/MAAAAABJRU5ErkJggg==);
    background-size: cover;
}
.manage,
.quest {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}
.manage {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAAAXNSR0IArs4c6QAAAH9JREFUaIHt0EENgDAAwMAxP/OAIPx/mYf1QUjuFDS9nnu9g2Pz64C/MzAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjAyMDIwMjDaLc0CMinYKlkAAAAASUVORK5CYII=);
    background-size: contain;
}
.partie-holder {
    display: flex;
    width: 80%;
    justify-content: flex-start;
    align-items: center;
    border: solid #000;
    margin: 10px;
    padding: 10px;
    background-color: #333;
}
.add-btn {
    border: 8px solid #000;
    width: 10vh;
    justify-content: flex-end;
    font-size: 5em;
    margin-left: 10px;
    margin-right: 10px;
}
.add-btn,
.remove-btn {
    height: 10vh;
    display: flex;
    align-items: center;
    background-color: #000;
}
.remove-btn {
    margin-bottom: 10px;
}
.hero-holder,
.remove-btn {
    border: solid #000;
    width: 80%;
    justify-content: center;
}
.hero-holder {
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 10px;
    padding: 50px 10px 10px 10px;
    min-height: 50vh;
    background-color: #444;
}
.hero-holder,
.partie-heros {
    display: flex;
    gap: 10px;
}
.draggable {
    cursor: -webkit-grab;
    cursor: grab;
}
.draggable:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.draggable img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@-webkit-keyframes moveup {
    0% {
        margin-bottom: 0;
    }
    30% {
        margin-bottom: 0;
    }
    50% {
        margin-bottom: 40px;
    }
    70% {
        margin-bottom: 0;
    }
    to {
        margin-bottom: 0;
    }
}
@keyframes moveup {
    0% {
        margin-bottom: 0;
    }
    30% {
        margin-bottom: 0;
    }
    50% {
        margin-bottom: 40px;
    }
    70% {
        margin-bottom: 0;
    }
    to {
        margin-bottom: 0;
    }
}
@-webkit-keyframes movedown {
    0% {
        margin-bottom: 0;
    }
    30% {
        margin-bottom: 0;
    }
    50% {
        margin-bottom: -40px;
    }
    70% {
        margin-bottom: 0;
    }
    to {
        margin-bottom: 0;
    }
}
@keyframes movedown {
    0% {
        margin-bottom: 0;
    }
    30% {
        margin-bottom: 0;
    }
    50% {
        margin-bottom: -40px;
    }
    70% {
        margin-bottom: 0;
    }
    to {
        margin-bottom: 0;
    }
}
.animateUp {
    -webkit-animation: moveup 0.5s ease-in-out infinite;
    animation: moveup 0.5s ease-in-out infinite;
}
.animateDown {
    -webkit-animation: movedown 0.5s ease-in-out infinite;
    animation: movedown 0.5s ease-in-out infinite;
}
.fight {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAANFJREFUWIXtl9ENwjAMRC8swgoswxKs1h3YpZOUD2QpctNi9xwwat6/01dHviTl8bwtSMY8LbjeCwDg8mOXFSI3T+++pRMUuc0OivkRmNoakQOUoG6vB6Z2j6KHpG6vF6Z2i5VgNtINiWYIspgFI6fTs5ZJMDJCvGuZpzgyQjxrjZhhOZdg9DkMBAr2uiyECep7XBShQW2VG0HNMoL6m4QI9sg/gRbslX8CLcjm36cfawp6u8G+Ave+13y499yyGkv3mzHT48g6SnOLs8gBf5CDL5A9kQD7hKbDAAAAAElFTkSuQmCC);
    background-size: cover;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}
.fight,
.fight-title {
    display: flex;
    align-items: center;
}
.fight-title {
    height: 20%;
    justify-content: center;
}
.enemies {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
}
.enemy {
    background: #663931;
    border: 8px solid #000;
    padding: 2vh;
}
.enemy-img {
    width: 10vh;
}
.fighting {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2vh;
}
.fighting * {
    height: 27vh;
    transition: 0.5s ease-in;
}
.enemy-fighting,
.me-fighting {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vh;
    width: 55vw;
}
.crit-img {
    margin-left: -50%;
}
.frame[data-v-c9f8db32] {
    width: 647px;
    height: 600px;
    background-size: 647px;
    background-repeat: no-repeat;
    background-position-x: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 3vh;
    margin-top: 30px;
    margin-bottom: 30px;
}
.cnvs[data-v-c9f8db32] {
    width: 512px;
    height: 560px;
    border: 16px solid #000;
    background-color: #f1f1f1;
}
canvas[data-v-c9f8db32] {
    cursor: crosshair;
    background-image: repeating-linear-gradient(
            #ccc 0 1px,
            transparent 1px 100%
        ),
        repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
    background-size: 32px 32px;
    background-color: rgba(#fff, 0.9);
    width: 100%;
    height: 512px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.colors[data-v-c9f8db32] {
    display: flex;
    border-top: 16px solid #000;
    width: 100%;
    height: 32px;
    margin-top: -8px;
}
.color[data-v-c9f8db32] {
    height: 100%;
    flex: 1;
    cursor: pointer;
}
.color[data-v-c9f8db32]:hover {
    filter: brightness(0.9);
}
.color[data-v-c9f8db32]::active {
    filter: brightness(0.8);
}
.hero-creator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAyCAYAAAD4FkP1AAAAAXNSR0IArs4c6QAAAL5JREFUaIHt1MEJwkAYROFRUoY9WJA1xGaszBIE+9DTwhJ3QwKJ4Q3znSQnH38yp9v99ZGk9/MhF5frKEk6H/w/dmUdN5Qf5ZTk17M0FNaXSxyVddwwfVB/lIRxmY5IzfpyiaOyjvsZlFrrYz1yZObGo8X6comjShzV7Fq2/GtB1y5ji/XlEkeVOKrVa9nSW7YlK7rFKvZYXy5xVImj2mQte/ZcwiWsL5c4qsRRJY4qcVSJo0ocVeKoEkdlHfcFS/IZacjxfukAAAAASUVORK5CYII=);
    background-size: cover;
    height: 100%;
}
.name-input {
    padding-top: 1vh;
    width: 80%;
    font-size: 3vh;
}
.name-input input {
    width: 50%;
    font-size: 3vh;
}
.created-hero {
    width: 100%;
    justify-content: center;
}
.created-hero,
.help {
    height: 100%;
    display: flex;
    align-items: center;
}
.help {
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
}
.help-item {
    width: 80%;
    font-size: 3vh;
}
.leaderboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.board-btns {
    width: 50%;
    display: flex;
    justify-content: space-between;
    margin-top: 1vh;
}
.board-items {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-top: 3vh;
}
.board-item {
    display: flex;
    text-align: center;
}
.board-item div {
    flex: 1;
}
.me div {
    color: #e2b752;
}
.game {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    font-size: 5vh;
    width: 100%;
    height: 100%;
}
.help-btn {
    position: fixed;
    top: 5vh;
    left: 5vh;
}
.player-section {
    height: 90%;
    justify-content: flex-start;
    align-self: flex-end;
}
.control-section,
.player-section {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.control-section > button {
    margin-top: 4vh;
    width: 50%;
}
@font-face {
    font-family: PixelMain;
    src: url(../fonts/pixel-font.aff79bda.ttf);
}
* {
    font-family: PixelMain;
    color: #fff;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
body,
html {
    margin: 0;
}
#app,
body,
html {
    width: 100%;
    height: 100%;
}
#app {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAAAXNSR0IArs4c6QAAAw9JREFUaIHtmjFOKzEQhv8ARcpwAAqkNGmjfU3EDaB/VRpET5MqqZMqt6CizxEiGiJamkgUHAC6R4P2FZEXr9f22rMe2yB+KUpYWbH9+ffM2KF3+fivxK/IOko9gO+uE+4OttNJ9fni7oG7u+h9RnHg7c011stVbWJc2k4nWC9XuL25Zu8LiATw7HyI15c9O0QB7/Vlj7PzIVs/stgBXtw9YLaYs0NU4c0W8yghI4oDuSGmggdEzMJcEFPCAyKXMaEhpoYHJKgDQ0HMAR6QqJDuCjEXeEDCkwgVYk7wAKCX+izsA8TWdlP0W/u62n0EHTuQAUDADaKpjQs4nULBzAIgYIcYEt5u/4lieFx71gVmNgABPSgAQeEBaAAE6BCzuc7aTifaxAKgAY9S9gh4JlFDQTYOFFAEIJ0TZXjvz09e329znyxfJ1YAbSvAkb10Up2lgwj4wwP4AB4B7fbdFH2yxX0kkoa4z9NtZwo8Tp34gNkUfRY3ys5T7/Nmi3n1bL1cYTAaV21zgNkry5IUA0OC3E4n+Hv69fef2aq2ZYED2Mf117P7Nx6ApC1MEceWvn87vKuFtMjOchtZu/1n40WV77xaHagbjByIKU5UBzkYjWsOFJDkQhpAo43sQBO0tqRhkuu8rL/KtcGjyLTCqrNkB74/P2EwGmvdpxtXFwcKucZ7owN9VtR1tWJkciHXssUml3lpHajC6+o6IC68UHJxoRZgCGDqQKgK4SQubYp+mLMwl7tygGeam3ie9DLBFGflUiRX5wmRC2lVbbHCtJK2jEmFJ39nqAUQ81PnEQ2grnOhruVS6BrQR1EBAt3jpe5GWTyX5QIvhPvZ/72NQzqIvm5rK7ZNC6UqugMBugtD1qehnKwFSA3CnNs4ZZyzqVHGqAP1ud3grgdzVA2gbaBdr4mo4ihzQqoC6AqH69ctX+e7wuNe+F5ZlqVPzHNpa4uFNsCuE6U4r0sCsp2KgmVhVSaILg6NsW2prlT7ZwMINCHmeqXlAzMqQMB8hsxVvu5nBwgcIH4XgL6KAvAn6z84EKR5MU3ECAAAAABJRU5ErkJggg==);
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
}
button {
    outline: none;
    border: 8px solid #000;
    background-color: #663931;
    font-size: 5vmin;
    padding: 10px;
    color: #fff;
    cursor: pointer;
}
button:hover {
    background: #5c332c;
}
input {
    outline: none;
    border: 8px solid #000;
    background-color: #663931;
    font-size: 5vmin;
    padding: 10px;
    color: #fff;
}
.home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
.title {
    font-size: 10vw;
    color: #fff;
    margin-top: 5vh;
    margin-bottom: 5vh;
    text-shadow: 10px 10px 20px #000;
}
.creator,
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.loading {
    font-size: 10vh;
}