/* Base page styling */
html, body, main {
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100vw;
}

main {
    max-width: 60em;
    margin: auto;
    margin-top: 20px;
}

/* Coming soon */
main * {
    text-align: center;
}

main {
    width: fit-content;
    height: fit-content;
}

/* Base Hammer Setup */
#hammer,
#hammer-dragging {
    display: block;
    margin: auto;
    height: 8em;
}

/* Start hammer */
#hammer {
    margin-bottom: 1em;

    transition: transform 0.2s ease-in-out;
}

#hammer:hover {
    transform: rotate(-5deg);
    cursor: pointer;
}

/* Dragging hammer */
#hammer-dragging {
    position: absolute;
    transform: translate(-85%, -80%);
    pointer-events: none;

    transition: transform 0.005s linear;
}

#hammer-dragging.hitting {
    transform: translate(-80%, -65%) rotate(30deg);
}

/* Enemies */
#enemy-spawn-zone {
    height: calc(98vh - 4rem);
    width: 98%;

    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -1%);

    pointer-events: none;
}

.enemy {
    --enemy-size: 50px;

    width: var(--enemy-size);
    height: var(--enemy-size);

    position: absolute;
    transform: translate(-50%, -50%);

    background-size: contain;
    background-position: center;
    image-rendering: pixelated;

}

.enemy.basic {
    background-image: url("../assets/site-assets/hammer-enemies/basic.png");
}

.enemy.brute {
    background-image: url("../assets/site-assets/hammer-enemies/brute.png");
}

.enemy.glass {
    background-image: url("../assets/site-assets/hammer-enemies/glass.png");
}

.enemy.quad {
    background-image: url("../assets/site-assets/hammer-enemies/quad.png");
}

/* Enemy Animations */
.enemy.death {
    background-size: auto 100%;
    animation: sheet-anim 0.3s steps(7) forwards;
}

.enemy.basic.death {
    background-image: url("../assets/site-assets/hammer-enemies/basic-death.png");
}

.enemy.brute.hit {
    background-image: url("../assets/site-assets/hammer-enemies/brute-hit.png");

    background-size: auto 100%;
    animation: hit-anim 0.2s steps(4) forwards;
}

.enemy.brute.death {
    background-size: auto 100%;
    animation: sheet-anim 0.3s steps(7) forwards;
    background-image: url("../assets/site-assets/hammer-enemies/brute-death.png");
}

.enemy.glass.death {
    background-size: auto 100%;
    animation: sheet-anim 0.5s steps(7) forwards;
    background-image: url("../assets/site-assets/hammer-enemies/glass-death.png");
}

.enemy.quad.hit {
    background-image: url("../assets/site-assets/hammer-enemies/quad-hit.png");

    background-size: auto 100%;
    animation: hit-anim 0.3s steps(5) forwards;
}

.enemy.quad.death {
    background-size: auto 100%;
    animation: sheet-anim 0.45s steps(7) forwards;
    background-image: url("../assets/site-assets/hammer-enemies/quad-death.png");
}

@keyframes hit-anim {
    /* We need to have 2 different animations for hitting and death */
    /* Setting animation to sheet-anim twice doesnt do anything */
    /* So the brute-death animation will play at the same frame that the hit animation was at */
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

@keyframes sheet-anim {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
/* UI */
#game-ui {
    display: none;
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translate(-50%, -40%);
}

#enemy-count {
    font-family: "Stardom-Regular", 'Times New Roman', Times, serif;
    font-size: 5em;
}

#high-score {
    margin-top: -0.8em;
}

/* Dev Stats */
#dev-stats {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    margin: 3rem;

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

    display: none;
}