@font-face {
    font-family: PapyrusLoad;
    src: url('../resources/ui/papyrus.ttf');
}

@font-face {
    font-family: Augusta;
    src: url('../resources/ui/Augusta.ttf');
}

body, html {
    overflow-y: hidden;
    overflow-x: hidden;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: lightgray;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 1536px;
    height: 864px;
    margin: 0;

    --global-font: PapyrusLoad, Papyrus;
    --font-very-large: 40px;
    --font-large: 25px;
    --font-medium: 20x;
    --font-small: 16px;

    position: absolute;
    z-index: -999;
}

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}



.home-screen-title {
    font-family: Augusta, var(--global-font);
    font-size: calc(var(--font-very-large) * 2);
    line-height: calc(var(--font-very-large) * 1.5);
    text-align: center;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background-image: url("../resources/ui/signboard.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 60px;
}

    .home-screen-title > * {
        margin: auto;
        text-shadow: 0 0 calc(var(--font-very-large) * 1.5) white;
    }

.home-screen-menu {
    font-family: var(--global-font);
    font-size: calc(var(--font-very-large) * .9);
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 410px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
}

.home-screen-menu > li {
    padding: 10px 50px;
    transition: .2s;
    cursor: pointer;
    background-color: transparent;
    background-image: url("../resources/ui/paper-scroll.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    .home-screen-menu > li:hover {
        transform: scale(1.1);
        filter: brightness(1.1);
    }

.filter-black {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99999;
    animation: fadeIn .5s ease forwards;
}

.settings-button {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-image: url("../resources/ui/cog.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform .3s;
    z-index: 299;
}

    .settings-button:hover {
        transform: scale(1.1) rotateZ(90deg);
    }

.hero-selector {
    height: 405px;
    width: 270px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px white;
    cursor: pointer;
    transition: .2s;
}

.hero-selector1 {
    left: 20%;
}

.hero-selector3 {
    left: 80%;
}

.hero-selector:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.selected-commander {
    transition: 1.2s;
    transform: translate(-50%, -50%) scale(1.1);
    left: 50%;

}

.commander {
    transition: 1s;
    position: absolute;
    top: 70%;
    left: calc(var(--size) * -.15);
    transform: translateY(-50%) scale(.7);
    z-index: 1;
}

    /*.commander:hover {
        transition: .3s;
        left: 0;
        transform: translateY(-50%) scale(1);
    }*/

.shop {
    position: absolute;
    top: 0;
    left: 118px;
    width: 1150px;
    height: 264px;
    border: solid 3px #5c2f1f;
    border-top: none;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-image: url("../resources/ui/wood-texture.jpg");
    background-repeat: repeat;
    background-size: 150px 150px;
    animation: fadeIn 1s ease forwards;
    transition: .5s;
    display: grid;
    grid-template-columns: 130px 1fr repeat(var(--shop-size), 176px) 1fr;
    grid-gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .shop > .card {
        transition: .3s;
        cursor: pointer;
    }

        .shop > .card:hover {
            transform: scale(1.2) translateY(9%);
            z-index: 2;
            box-shadow: 0 0 10px white;
        }

.freeze {
    position: absolute;
    left: 148px;
    top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url("../resources/ui/wooden-disk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 1s ease forwards;
    transition: .3s;
    cursor: pointer;
    display: flex;
    filter: brightness(.85);
}

    .freeze:hover {
        box-shadow: 0 0 10px white;
        transform: scale(1.1);
        filter: brightness(.9);
    }

    .freeze > img {
        width: 75%;
        height: 75%;
        margin: auto;
    }

.frozen {
    position: relative;
}

    .frozen:after {
        content: '';
        position: absolute;
        top: -1.28%;
        left: -1.925%;
        height: 102.57%;
        width: 103.85%;
        background-image: url("../resources/ui/frozen.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: .5s;
        z-index: 2;
        animation: fadeInFrozen .3s ease forwards;
    }

.refresh {
    position: absolute;
    left: 148px;
    top: 120px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url("../resources/ui/wooden-disk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 1s ease forwards;
    transition: .3s;
    cursor: pointer;
    display: flex;
    filter: brightness(.85);
}

    .refresh:hover {
        box-shadow: 0 0 10px white;
        transform: scale(1.1);
        filter: brightness(.9);
    }

    .refresh > img {
        position: relative;
        left: -5%;
        width: 70%;
        height: 70%;
        margin: auto;
    }

.money {
    position: absolute;
    left: 148px;
    top: 230px;
    width: 100px;
    height: 40px;
    animation: fadeIn 1s ease forwards;
    transition: .3s;
    display: grid;
    grid-template-columns: 40px 40px;
    padding-left: 10px;
    padding-right: 10px;
    grid-gap: 0px;
}

    .money > img {
        width: 40px;
        height: 40px;
        border: solid 1px black;
        border-radius: 50%;
    }

    .money > div {
        text-align: center;
        font-family: Verdana;
        font-size: var(--font-very-large);
        font-weight: bold;
        color: goldenrod;
        text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
    }

.shop-tier {
    position: absolute;
    left: 100px;
    top: 5px;
    width: 50px;
    height: 50px;
    background-image: url("../resources/ui/crest.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    transition: .3s;
}

    .shop-tier > div {
        font-family: Verdana;
        font-size: calc(var(--font-very-large) * .8);
        font-weight: bold;
        text-align: center;
        margin: auto;
        color: #f7d47a;
        padding-bottom: 5px;
    }

.hand {
    height: 264px;
    min-width: 1000px;
    position: absolute;
    bottom: -125px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    transition: .5s;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 10px 10px 0 10px;
}

    .hand > div {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10px;
        margin: auto;
        position: relative;
    }

        .hand > div > .card {
            position: relative;
            transition: .3s;
            cursor: pointer;
        }

            .hand > div > .card:hover {
                z-index: 3;
                transform: translateY(-60%) scale(1.2);
                box-shadow: 0 0 10px white;
            }

    .hand.hint {
        outline: 3px dashed #aaaa;
        background-color: #aaa5;
    }

.board {
    position: absolute;
    left: 300px;
    top: 320px;
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-gap: 35px;
    animation: fadeIn 1s ease forwards;
    transition: .5s;
}

    .board > div {
        position: relative;
        height: 154px;
        z-index: 0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        transition: .5s;
    }

        .board > div:before {
            content: '';
            position: absolute;
            z-index: -1;
            opacity: .5;
            background-image: url("../resources/ui/card-texture-horizontal.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 4px solid #954B30;
            height: 100%;
            width: 100%;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
        }

        .board > div > div {
            position: relative;
            transition: all .5s, background 0s;
            animation: fadeIn .5s ease;
            cursor: pointer;
        }

            .board > div > div:hover {
                transform: scale(1.06);
                box-shadow: 0 0 10px white;
            }

        .board > div:after {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 4px solid rgba(0, 0, 0, 0);
            height: 100%;
            width: 100%;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            transition: .5s;
        }

        .board > .power-spot:after {
            animation: glowRed 2.5s infinite;
        }

.players {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    border: solid 3px #606060;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 30px;
    background-image: url("../resources/ui/brick-texture.jpg");
    background-repeat: repeat;
    background-size: 150px 150px;
    animation: fadeIn 1s ease forwards;
    transition: .5s;
    display: grid;
    grid-template-rows: repeat(8, 77px);
    grid-gap: 10px;
    padding: 15px;
    animation: fadeIn 1s ease;
}

    .players > .small-card {
        transition: .5s;
    }

    .players > .small-card:hover {
        transform: scale(1.06);
        box-shadow: 0 0 10px white;
    }

.fight {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-image: url("../resources/ui/wooden-disk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 1s ease forwards;
    transition: .3s;
    cursor: pointer;
    display: flex;
    filter: brightness(.85);
}

    .fight:hover {
        box-shadow: 0 0 10px white;
        transform: scale(1.1);
        filter: brightness(.9);
    }

    .fight > img {
        width: 70%;
        height: 70%;
        margin: auto;
        filter: brightness(0);
    }

.tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 30px;
    animation: fadeIn .5s ease;
    z-index: 200;
}

    .tooltip::before {
        position: absolute;
        top: calc((-864px + 100%) / 2);
        left: calc((-1536px + 100%) / 2);
        width: 1536px;
        height: 864px;
        content: '';
        background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
        z-index: -1;
    }

    .tooltip > *:first-child {
        display: flex;
    }

        .tooltip > *:first-child > * {
            margin: auto;
        }

    .tooltip > .tips {
        padding-top: 15px;
        padding-bottom: 15px;
        display: grid;
        width: fit-content;
        height: fit-content;
        grid-auto-flow: row;
        grid-row-gap: 15px;
    }

        .tooltip > .tips > div:not(.card-refs) {
            width: 200px;
            padding: 10px 40px 10px 40px;
            font-family: var(--global-font);
            font-size: var(--font-medium);
            font-weight: bold;
            text-align: center;
            background-image: url("../resources/ui/paper-scroll.png");
            background-size: 100% 100%;
        }

        .tooltip > .tips > .card-refs {
            display: flex;
        }

            .tooltip > .tips > .card-refs > * {
                width: auto;
                display: grid;
                grid-template-columns: repeat(2, auto);
                grid-gap: 10px;
                margin: auto;
            }

.shop-banner {
    position: absolute;
    top: 35%;
    left: 50%;
    font-size: var(--font-very-large);
    font-family: var(--global-font);
    font-weight: bold;
    padding: 10px 60px 30px 60px;
    background-image: url("../resources/ui/parchment.png");
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    animation: strafe 2s linear;
    opacity: 0;
    z-index: 10;
}

.choose-banner {
    position: absolute;
    top: 15%;
    left: 50%;
    font-size: var(--font-very-large);
    font-family: var(--global-font);
    font-weight: bold;
    padding: 10px 85px 30px 60px;
    background-image: url("../resources/ui/parchment.png");
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    transition: .6s;
}

.families-banner {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: var(--font-large);
    font-family: var(--global-font);
    font-weight: bold;
    text-align: center;
    padding: 10px 40px 10px 40px;
    background-image: url("../resources/ui/brick-texture.jpg");
    background-repeat: repeat;
    background-size: auto 100%;
    transform: translateX(-50%);
    transition: .6s;
    border: solid 3px #606060;
    border-bottom: none;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}










.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -998;
    transition: .5s;
    background-image: url("../resources/ui/battle-bg.jpg");
    background-size: 100% 100%;
}

.night-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -999;
    transition: .5s;
    background-image: url("../resources/ui/team-builder-night-bg.jpg");
    background-size: 100% 100%;
}

.enemy-commander {
    position: absolute;
    bottom: 864px;
    left: 110px;
    transform: scale(.7);
    transition: .5s;    
}

.attacking {
    position: relative;
    transform: scale(1.1);
    box-shadow: 0 0 10px white;
    transition: .5s;
    z-index: 10 !important;
}

.filter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.semi-black-filter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: 1s;
    animation: fadeIn 1s ease forwards;
}

.casting {
    position: absolute;
    top: 400px;
    right: 50px;
    box-shadow: 0 0 20px white;
    z-index: 100;
    animation: fadeIn .5s ease;
}

.target-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: var(--font-very-large);
    font-family: var(--global-font);
    font-weight: bold;
    padding: 10px 60px 30px 60px;
    background-image: url("../resources/ui/parchment.png");
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    animation: fadeIn .5s ease;
    z-index: 10;
}

.end-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: var(--font-very-large);
    font-family: var(--global-font);
    font-weight: bold;
    padding: 10px 70px 30px 60px;
    background-image: url("../resources/ui/parchment.png");
    background-size: 100% 100%;
    transform: translate(-50%, -50%) scale(1.5);
}

.end-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--font-very-large) * 1.2);
    font-family: var(--global-font);
    font-weight: bold;
    text-align: center;
    color: white;
}

.end-click {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-large);
    font-family: var(--global-font);
    font-weight: bold;
    text-align: center;
    color: white;
}

.spell-area {
    position: absolute;
    top: 287px;
    bottom: 139px;
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none;
}

.equipment-grid {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
}

    .equipment-grid > * {
        transition: .3s;
        cursor: pointer;
    }

    .equipment-grid > *:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px white;
    }

.bargain-grid {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
}

    .bargain-grid > *:first-child, .bargain-grid > *:last-child {
        padding: 10px 50px;
        transition: .2s;
        cursor: pointer;
        background-color: transparent;
        background-image: url("../resources/ui/paper-scroll.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-size: var(--font-large);
        font-family: var(--global-font);
        font-weight: bold;
        text-align: center;
        height: fit-content;
        margin: auto;
        min-width: 108px;
    }

        .bargain-grid > *:first-child:hover, .bargain-grid > *:last-child:hover {
            transform: scale(1.1);
            filter: brightness(1.1);
        }

.tutoriel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px white;
    transition: all .5s ease;
    z-index: 50;
    pointer-events: none;
}

    .tutoriel.dock-left {
        left: 10%;
    }

    .tutoriel.dock-right {
        left: 90%;
    }

.filter.tuto {
    z-index: 50;
    background-color: #000a;
}

#click-to-continue {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: var(--global-font);
    font-size: var(--font-large);
}

.back-button {
    position: absolute;
    top: 10px;
    left: 80px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    background-image: url("../resources/ui/wooden-disk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform .3s;
    z-index: 299;
    display: flex;
    filter: brightness(.85);
}

    .back-button:hover {
        box-shadow: 0 0 5px white;
        transform: scale(1.1);
        filter: brightness(.9);
    }

    .back-button > img {
        width: 75%;
        height: 75%;
        margin: auto;
    }

.spell-preview {
    position: absolute;
    top: 400px;
    right: 50px;
    box-shadow: 0 0 20px white;
    z-index: 100;
    opacity: 0;
    animation: previewShort 2s ease;
}













@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInFrozen {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .6;
    }
}

@keyframes flicker {
    0% {
        transform: scale(1.1) rotateZ(0deg);
    }

    25% {
        transform: scale(1.1) rotateZ(10deg);
    }

    75% {
        transform: scale(1.1) rotateZ(-10deg);
    }

    100% {
        transform: scale(1.1) rotateZ(0deg);
    }
}

@keyframes flip1 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}

@keyframes flip2 {
    0% {
        transform: rotateY(-90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes flip1commander {
    0% {
        transform: rotateY(0deg) translateY(-50%) scale(.7);
    }

    100% {
        transform: rotateY(90deg) translateY(-50%) scale(.7);
    }
}

@keyframes flip2commander {
    0% {
        transform: rotateY(-90deg) translateY(-50%) scale(.7);
    }

    100% {
        transform: rotateY(0deg) translateY(-50%) scale(.7);
    }
}

@keyframes strafe {
    0% {
        opacity: 0;
        transform: translate(-60%, -50%);
    }

    10% {
        opacity: 1;
        transform: translate(-58%, -50%);
    }

    90% {
        opacity: 1;
        transform: translate(-42%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-40%, -50%);
    }
}

@keyframes glowRed {
    0% {
        box-shadow: 0 0 30px #ff7777;
    }

    45% {
        box-shadow: 0 0 40px red;
    }

    55% {
        box-shadow: 0 0 40px red;
    }

    100% {
        box-shadow: 0 0 30px #ff7777;
    }
}

@keyframes previewShort {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    85% {
        opacity: 0;
    }
}