:root {
    --actual-card-width: 421;
    --actual-card-height: 614;
    --actual-grid-gap: 50;
    --actual-game-width: calc(2 * var(--actual-card-width) + 5 * var(--actual-card-height) + 8 * var(--actual-grid-gap));
    --actual-game-height: calc(7 * var(--actual-card-height) + 10 * var(--actual-grid-gap));
    --game-x-scale: calc(100vw / var(--actual-game-width));
    --game-y-scale: calc(100vh / var(--actual-game-height));
    --game-scale: min(var(--game-x-scale), var(--game-y-scale));

    --card-width: calc(var(--actual-card-width) * var(--game-scale));
    --card-height: calc(var(--actual-card-height) * var(--game-scale));
    --grid-gap: calc(var(--actual-grid-gap) * var(--game-scale));

    /* --board-x-rotate: 30deg;
    --board-y-translate: calc(-1 * 8vh); */

    --board-x-rotate: 0deg;
    --board-y-translate: 0px;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background-color: black;
    margin: 0px;
}

.game-container {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.board {
    display: grid;
    grid-template-columns: var(--card-width) repeat(5, var(--card-height)) var(--card-width);
    grid-template-rows: repeat(5, var(--card-height));
    grid-gap: var(--grid-gap);
    padding: var(--grid-gap);

    transform-origin: bottom;
    transform:
        translateY(var(--board-y-translate))
        perspective(calc(var(--card-height) * 10))
        rotateX(var(--board-x-rotate));
}

.slot {
    outline: 1px dashed gray;
}

.center.slot {
    outline: none;
}

.monster.slot {
    outline: 1px dashed red;
}

.spell.slot {
    outline: 1px dashed red;
}

.banished.slot {
    outline: 1px dashed darkgray;
}

.hand-container {
    width: 100%;
    height: var(--card-height);
    margin: var(--grid-gap);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.hand {
    width: var(--card-width);
    height: var(--card-height);
}

.card {
    --width: var(--card-width);
    --height: var(--card-height);
    width: var(--width);
    height: var(--height);
    
    /* --x-position: -1000000; */
    /* --y-position: -1000000; */

    --x-position: 0;
    --actual-x-offset: 0;
    --y-position: 0;
    --actual-y-offset: 0;
    position: absolute;
    left: calc(var(--x-position) * 1px + var(--actual-x-offset) * var(--game-scale));
    top: calc(var(--y-position) * 1px + var(--actual-y-offset) * var(--game-scale));
    
    --y-rotation: 0;
    --z-rotation: 0;

    --z-index: 0;
    z-index: var(--z-index);

    /* pointer-events: none; */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.card > img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    position: absolute;
    backface-visibility: hidden;

    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.card-front {
    transform:
        perspective(calc(var(--card-height) * 10))
        rotateZ(calc(var(--z-rotation) * 1deg))
        rotateY(calc(var(--y-rotation) * 1deg));
}

.card-back {
    transform:
        perspective(calc(var(--card-height) * 10))
        rotateZ(calc(var(--z-rotation) * 1deg))
        rotateY(calc(var(--y-rotation) * 1deg + 180deg));
}

.card.selected > img {
    border: 2px solid yellow;
    border-radius: calc(var(--card-width) / 20);
    margin: -2px;
}


.floating {
    transition: top 0.4s ease-in-out, left 0.4s ease-in-out, transform 0.4s ease-in-out;
    /* transition: top 0.5s ease-in-out, left 0.5s ease-in-out, transform 0.5s ease-in-out; */
    /* transition: top 0.8s ease-in-out, left 0.8s ease-in-out, transform 0.8s ease-in-out; */
    /* transition: top 8s ease-in-out, left 8s ease-in-out, transform 8s ease-in-out; */
}

.modal {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000000;
}

#card-select-modal {
    display: none; /* flex */
    align-items: center;
    justify-content: center;
}

#card-select-cards {
    width: 80vw;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

#card-select-cards > img {
    width: var(--card-width);
    height: var(--card-height);
    margin: 5px;
}

#card-inspect-modal {
    display: none; /* flex */
    align-items: center;
    justify-content: center;
}

#card-inspect-card {
    width: 80vw;
    height: 80vh;
    overflow: hidden;
}

#card-inspect-card > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.start-modal {
    font-size: min(20vh, 8vw);
    display: flex; /* none */
}

#import-button {
    color: red;
    font-family: font;
    font-size: calc(0.3 * var(--card-height));

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#import-modal {
    font-size: min(20vh, 8vw);
    display: none;
    flex-direction: column;
}

#import-modal > input {
    color: red;
    background-color: black;
    font-family: font;
    border: 2px solid red;
    width: 100%;

    font-size: min(10vh, 4vw);
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    padding: 20px;
}

#import-modal > input:focus {
    outline: none;
}


/* from template */

@font-face {
    font-family: font;
    src: url(../../resources/fonts/darkforest.woff2);
}

.errmodal {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10%;
    overflow: hidden;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000000;

    background-color: black;
    color: red;
    font-family: font;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-modal {
    font-size: min(10vh, 4vw);
    display: none;
}