:root {
    --card-radius: calc(var(--spacing-double) * 2);
    --card-shadow: var(--color-primary) 0.1em 0.1em var(--spacing-double);
}

header h1 {
    /* Matches the About page title */
    font-size: 2rem;
    color: var(--hq-card-text-dark);
    padding-block: var(--spacing);
}

main {
    min-height: var(--content-height);
}

.table {
    min-width: 700px;
}

.content {
    padding: var(--spacing);
    margin: auto;
}

.actions {
    --_spacing: var(--spacing);
    @media (width < 480px){
        --_spacing: var(--spacing-half);
    }

    display: flex;
    flex-direction: row;

    padding: var(--_spacing) 0;
    justify-content: end;

    .active {
        font-weight: bold;
    }

    &.actions--centered {
        justify-content: space-around;
    }
    &.actions--name{
        gap: var(--_spacing);
        align-items: center;
        justify-content: space-between;
        width: 100%;

        
        @media (width > 480px) {
            width: 300px;
        }
    }
    
    .actions__group {
        display: flex;
        gap: var(--_spacing);
    }
}

/*
    width: 150px; 
    height: 215px; 
    position: relative; 
    transform-style: preserve-3d; 
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
*/
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}



.content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-double);
    /* Room between the controls and the bottom of the page */
    padding-bottom: calc(var(--spacing-double) * 2);
    /* transform-origin: center center; */
    /* width: 100%; 
    min-height: 480px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 2rem 0; */
}

#monsterChartTable {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 300px;
}

.monster-card {
    --_icon-size: 90px;
    --_image-size: 225px;
    --_banner-size: 73px;
    --_image-margin: calc(var(--_banner-size) * 0.5);

    position: absolute;
    /* width: 300px;  */
    /* height: 900px; */

    border-radius: var(--spacing-double);
    max-width: 300px;
    box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);

    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;

    &>* {
        box-sizing: border-box;
    }

    .monster-card__card-face {
        .monster-card__name {
            font-size: 1.25rem;
            font-weight: bold;
            text-align: center;
            background-image: url("../../img/banner.png");
            background-size: contain;
            background-repeat: no-repeat;
            min-height: var(--_banner-size);
            padding-top: 10px;

            grid-row: 1;
            z-index: 1;
            grid-column: 1 / span 2;
        }

        .monster-card__abilities {
            font-size: 1rem;
            font-style: italic;
            text-align: center;
            font-weight: bold;
            margin-top: var(--spacing);

            overflow-y: auto;

            &:empty {
                display: none;
            }
        }

        &.monster-card__card-face--front {
            position: relative;
            backface-visibility: hidden;
            padding: var(--spacing);
            background-color: var(--color-background-offset);
            border: 5px solid var(--color-background);
            color: var(--color-primary);
            border-radius: 1rem;
            height: 430px;
            width: 300px;
            display: flex;
            flex-direction: column;
            cursor: pointer;

            .monster-card__image-container {
                display: grid;
                flex: 1;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr;
                height: 200px;

                .monster-card__image {
                    grid-column: 1 / span 2;
                    grid-row: 1 / span 3;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                    margin-top: var(--_image-margin, 0px);

                    &.monster-card__image--smaller{
                        object-fit: contain;
                    }
                }

                .monster-card__icon {
                    width: var(--_icon-size);
                    height: var(--_icon-size);
                    object-fit: contain;
                    grid-column: 1;
                    grid-row: 3;
                    align-self: end;
                    margin: -0.75rem;

                    &.icon--game-net {
                        width: calc(var(--_icon-size) * 0.64);
                        height: calc(var(--_icon-size) * 0.64);
                        padding: calc(var(--_icon-size) * 0.18);
                    }
                }
            }


            .monster-card__statistics {
                --_border-size: 1px;
                display: flex;
                gap: var(--_border-size);
                background-color: var(--color-primary);
                border: var(--_border-size) solid var(--color-primary);
                box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);

                .monster-card__statistic {
                    box-sizing: border-box;

                    display: flex;
                    flex-direction: column;
                    flex: 1 1 0%;

                    gap: var(--_border-size);
                    background-color: var(--color-primary);

                    &>* {
                        padding: var(--spacing-half) var(--spacing-half);
                        text-align: center;
                        background-color: var(--color-foreground);
                    }

                    .monster-card__statistic-label {
                        text-wrap: balance;
                        font-size: 0.75rem;
                        font-family: var(--font-title);
                    }

                    .monster-card__statistic-value {
                        font-size: 1.5rem;
                        font-weight: bold;
                        text-align: center;
                    }
                }
            }

        }

        &.monster-card__card-face--back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotateY(180deg);
            backface-visibility: hidden;

            position: absolute;
            background-image: url("../../img/monsterBackground.jpg");
            background-size: cover;
            background-position: center;

            background-clip: border-box;
            border-radius: calc(var(--spacing-double) / 2);
        }
    }
}

/* Section card, the same as the About page's .card (monster cards also carry .card, hence section) */
section.card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-double);
    padding: var(--spacing-double);
    background-color: var(--color-background-offset);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);

    > h2 {
        text-align: center;
    }
}

.actions-container{
    /* Keep the controls above the carousel's 3D-transformed cards, which would otherwise paint over it */
    position: relative;
    z-index: 1;

    width: 300px;

    @media (width < 480px) {
        width: 100%;
    }

    .actions {
        align-items: center;
        padding: 0;
    }
}