@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    display: inline-block;

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


:root {
    /* altezza e larghezza in world coords */
    --world-width: 1280;
    --world-height: 720;

    /* world coords in px (will be overwritten by JS: pixels per world unit) */
    --wc-unit: 1px;


    /* colori */
    --black: #212121;
    --gray-1: #333;
    --gray-2: #363636;
    --gray-3: #5e5e5e;
    --white: #eee;
    --red: #d14747;
    --blue: #477ed1;

    --light-brown: #ad8b5e;
    --brown: #8b6636;
    --dark-brown: #423017;
}


body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background: var(--black);
    overflow: hidden;

    #text-top {
        position: fixed;
        top: 5px;
        width: 100vw;
        margin: 0;
        padding: 0;
        text-align: center;
        z-index: 200;
        color: var(--white);
    }

    #game-root {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        /* non imposta width/height qui: li imposterà JS via variabili CSS usando --wc-unit */
        #game {
            position: relative;
            width: calc(var(--world-width) * var(--wc-unit));
            height: calc(var(--world-height) * var(--wc-unit));
            /* griglia di riferimento su unità di 20 world units (esempio estetico) */
            /* background-image:
                linear-gradient(var(--gray-1) 1px, transparent 1px),
                linear-gradient(90deg, var(--gray-1) 1px, transparent 1px);
            background-size: calc(20 * var(--wc-unit)) calc(20 * var(--wc-unit)); */
            background-image: url('../img/ambient/bg.png');
            background-size: cover;
            image-rendering: pixelated;

            overflow: hidden;
            box-sizing: border-box;
            background-color: var(--gray-2);
            border: solid 2px var(--white);
        }
    }

    & #loading-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--black);
        color: var(--white);
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    & #map-chooser {
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #33333383;
        backdrop-filter: blur(10px);
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        gap: 15px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: scroll;

        & .level-card {
            background-color: var(--black);
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border-radius: 10px;
            border: solid 1px #000;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            cursor: pointer;
            transition: all .2s ease-in-out;

            &:hover {
                transform: scale(1.1);
                background: var(--red);
                background: linear-gradient(-40deg, var(--red) 47%, var(--blue) 53%);
            }

            & .level-card-img {
                width: min(50vw, 300px);
                border: solid 1px #000;
                border-radius: 10px;
                image-rendering: pixelated;
            }

            & .level-card-title {
                color: var(--white);
                padding-top: 10px;
            }
        }
    }

    & #character-chooser {
        z-index: 101;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #33333383;
        backdrop-filter: blur(10px);
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        gap: 15px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: scroll;

        & .character-card {
            background-color: var(--black);
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border-radius: 10px;
            border: solid 1px #000;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            cursor: pointer;
            transition: all .2s ease-in-out;
            position: relative;

            &:hover {
                transform: scale(1.1);
            }

            & .character-card-img {
                width: min(50vw, 300px);
                border: solid 1px #000;
                border-radius: 10px;
                image-rendering: pixelated;
            }

            & .character-card-title {
                color: var(--white);
                position: absolute;
                bottom: 20px;
                background-color: var(--black);
                padding: 5px;
                border-radius: 3px;
                width: 80%;
                text-align: center;
            }
        }
    }

    & #player-info-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 3px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        & .player-info {
            width: min(30vh, 150px);
            height: min(30vh, 150px);
            background-color: var(--black);
            border: solid 2px var(--white);
            box-sizing: border-box;
            position: relative;
            padding: 5px;
            border-radius: 5px;

            &.p1 {
                border: solid 2px var(--red);
            }

            &.p2 {
                border: solid 2px var(--blue);
            }

            & .player-icon {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                image-rendering: pixelated;
            }

            & .player-damage {
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                text-align: center;
                font-family: "Bangers", system-ui;
                font-size: 20px;
                padding: 5px 0;
                box-sizing: border-box;
                color: var(--red);
                background-color: var(--black);

                & span {
                    font-family: "Bangers", system-ui;
                }
            }
        }
    }

    /* entità posizionate in world coords:
        --x, --y: world coordinates del centro (o top-left, vedi nota)
        --w, --h: width/height in world units
    */
    .game-element {
        position: absolute;
        left: calc(var(--x) * var(--wc-unit));
        top: calc(var(--y) * var(--wc-unit));
        width: calc(var(--w) * var(--wc-unit));
        height: calc(var(--h) * var(--wc-unit));
    }


    .entity {
        /* mantiene --x,--y come centro */
        transform: translate(-50%, -50%);

        pointer-events: none;
        /* background: #f8e80914; */
        /* border: 1px solid #f8e80914; */
        box-sizing: border-box;
        z-index: 10;

        &#player1 {
            /* border: 1px solid var(--red); */
            background-size: contain;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: bottom;
            image-rendering: pixelated;
        }

        &#player2 {
            /* border: 1px solid var(--blue); */
            background-size: contain;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: bottom;
            image-rendering: pixelated;
        }

        &.reverse {
            transform: translate(-50%, -50%) scaleX(-1);
        }
    }

    .platform {
        transform: translate(-50%, -50%);

        background-color: var(--gray-3);
        border: 2px solid var(--gray-1);
        border-radius: 4px;
        pointer-events: none;
        z-index: 1;
    }

    .block {
        transform: translate(-50%, -50%);

        background-color: var(--gray-1);
        border: 2px solid var(--black);
        border-radius: 4px;
        pointer-events: none;
        z-index: 2;
    }
}


.hidden {
    display: none !important;
}







/* tmp */
.hitbox {
    position: absolute;
    background: rgba(255, 215, 0, 0.3);
    border: 2px dashed rgba(255, 165, 0, 0.7);
    pointer-events: none;
    box-sizing: border-box;
}

.hurtbox {
    position: absolute;
    /* background: rgba(0, 255, 0, 0.3);
    border: 2px dashed rgba(0, 200, 0, 0.7); */
    pointer-events: none;
    box-sizing: border-box;
}