:root {
    --margin: 5%;

    --background-color: #D3D3D3;
    --primary-color: beige;
    --secondary-color: brown;
    --space-normal: 10px;

    --space-smaller: calc(var(--space-normal) * 0.6);
    --space-bigger: calc(var(--space-normal) * 1.4);

    --border-radius: 3px;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
}

.hidden {
    display: none !important;
}

#lobby {
    --header-footer-height: max(10vh, 4em);

    width: calc(100% - 2 * var(--space-smaller));
    height: calc(100% - 2 * var(--space-smaller));

    background-color: var(--primary-color);
    border: var(--space-smaller) solid var(--secondary-color);
    border-radius: var(--space-bigger);

    box-shadow: 0 0 0 9001px var(--secondary-color);

    display: grid;
    grid-template:
        "title mapName mapName" var(--header-footer-height)
        "mapPreview mapPreview mapPreview" calc(100% - 2 * var(--header-footer-height))
        "empty empty buttons" var(--header-footer-height) / 1fr 1fr 1fr;

    & > * {
        max-width: 100%;
        max-height: 100%;
    }
    & > h2 { grid-area: title; justify-self: left; margin-left: var(--margin)}
    & > #mapPreview { grid-area: mapPreview; justify-self: center }
    & > #mapName { grid-area: mapName; justify-self: right; margin-right: var(--margin); }
    & > #buttons {
        grid-area: buttons;
        display: flex;
        gap: var(--space-normal);
        justify-content: right;
        align-content: center;
        padding: var(--space-smaller);

        & > * {
            aspect-ratio: 1;
            height: 100%;

            background-color: var(--primary-color);
            border: var(--border-radius) solid var(--secondary-color);
            border-radius: var(--space-normal);
        }
    }
}

#textures > img {
    max-width: 100%;
    max-height: 100%;
}

button:has(> img:only-child) {
    background-color: transparent;
    cursor: pointer;
    border: none;
    border-radius: 100%;
    padding: 0;

    & > img {
        width: 100%;
        height: 100%;
    }
}
#game {
    & > canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    & > #gui {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        font-size: max(20px,5vh);
        pointer-events: none;

        display: grid;
        grid-template:
            "money life void1 crystal void2 void3 wave" 1fr
            "menu menu menu towers towers towers towers" 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

        & > #money { grid-area: money }
        & > #life { grid-area: life }
        & > #crystal { grid-area: crystal }
        & > #wave { grid-area: wave }
        & > #menu { grid-area: menu }
        & > #towers {
            grid-area: towers;
            display: flex;
            justify-content: right;
            align-items: end;
            gap: var(--space-normal);
            padding: var(--space-normal);
        }

        /* justification */
        & > #money, & > #life, & > #menu { justify-self: start }
        & > #crystal { justify-self: center }
        & > #wave, & > #entityActions { justify-self: end }

        /* alignment */
        & > #money, & > #life, & > #crystal, & > #wave { align-self: start }
        & > #menu, & > #entityActions { align-self: end }

        & > #money, & > #life, & > #menu, & > #crystal, & > #wave {
            display: flex;
            align-items: center;
            gap: var(--space-normal);
        }
        & button { font-size: 1em }
        & img {
            height: 1.5lh;
            aspect-ratio: 1;
        }

        & > #menu > *, & > #towers > * {
            pointer-events: all;
        }

        #menu > * {
            border: none;
            background: none;
        }
    }
}

button[data-cost] {
    position: relative;
    width: 1.5lh;
    height: 1.5lh;
    &::after {
        --font-size: 2vh;
        --padding: 2px;
        --border: 2px;
        position: absolute;
        padding: var(--padding);
        border-radius: calc(2 * var(--border));
        border: var(--border) solid green;
        content: attr(data-cost);
        background-color: brown;
        color: white;
        font-size: var(--font-size);
        z-index: 1;
        bottom: 0;
        left: 50%;
        translate: -50% calc(var(--font-size) / 2);
    }
}

#debugOverlay {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    width: fit-content;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.5);
    padding: var(--space-normal);
    border-bottom-left-radius: var(--space-smaller);
}

#towerMenu {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;

    left: calc(var(--tower-x));
    top: calc(var(--tower-y));

    /* these are set in the javascript */
    --tower-x: 0;
    --tower-y: 0;
    --tower-world-width: 0;
    --tower-world-height: 0;
    --zoom-level: 0;
    --cell-width-factor: 0;
    --cell-height-factor: 0;

    /* calculated variables */
    --button-width: 9vh;
    --button-height: 9vh;
    --tower-pixel-width: calc(var(--tower-world-width) * var(--zoom-level) * var(--cell-width-factor));
    --tower-pixel-height: calc(var(--tower-world-height) * var(--zoom-level) * var(--cell-height-factor));

    & #sellTower, & #upgradeTower {
        position: absolute;
        width: var(--button-width);
        height: var(--button-height);
    }
    & #sellTower {
        translate: calc(0px - var(--button-width)) calc(calc(var(--tower-pixel-height) - var(--button-height)) / 2);
    }
    & #upgradeTower {
        translate: calc(0px + var(--tower-pixel-width)) calc(calc(var(--tower-pixel-height) - var(--button-height)) / 2);
    }
}


.menu {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: fit-content;
    max-height: 90vh;

    display: flex;
    flex-direction: column;
    gap: var(--space-smaller);
    padding: var(--space-normal);

    background-color: var(--background-color);
    border: var(--border-radius) solid var(--secondary-color);
    border-radius: var(--space-normal);

    & > * {
        margin: 0 var(--margin) 0 var(--margin);
        width: calc(100% - 2 * var(--margin));
        min-width: fit-content;
    }

    & button {
        background-color: var(--primary-color);
        border: 1px solid var(--secondary-color);
        padding: var(--space-smaller);

        cursor: pointer;
    }

    & .texturePackMenu {
        display: flex;
        flex-direction: column;
    }
}