* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #413F42 0%, #1a1a1a 100%);
    color: #eaeaea;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
}


.battle_field {
    position: relative;
    border-bottom: 2px solid #00FF00;
    color: #00FF00;
    font-size: large;
    font-weight: 700;
    background-color: black;
    font-family: monospace;
    padding-bottom: 4px;
    width: 90vw;
    max-width: 600px;
    aspect-ratio: 3 / 2;
    padding: 1vmin;
}

.invaders_container {
    position: absolute;
    /* border: 1px white solid; */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 450px;
    top: 30vmin;
    min-width: 200px;
    min-height: 250px;
}

.invaders_section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1vmin;
    width: 12vmin;

}

.hero_tag {
    position: absolute;
    /* border: 1px white solid; */
    left: calc((100% - 8vmin) / 2);
    background-image: url("../sprites/Invaders/hero.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 2vmin;
}

.shields {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    bottom: 12vmin;
    min-width: 100%;
    min-height: auto;
}

.shields {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 1rem;
}

.shield {
    display: grid;
    grid-template-columns: repeat(12, 4px);
    /* 12 columns */
    grid-template-rows: repeat(10, 4px);
    /* 16 rows */
    width: fit-content;
    height: fit-content;
}

.shield-cell {
    width: 4px;
    height: 4px;
    background-color: white;
}


#game_advancement {
    display: flex;
    /* FIX: not 'contents' */
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 2px solid #00FF00;
    padding: 10px;
    box-sizing: border-box;
    min-width: 100%;
}

#score_container,
#attempts_container,
#time_container {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* Optional spacing between text and number */
    font-size: 0.9rem;
    margin: 0;
}

#score_number,
#lives_number {
    font-weight: bold;
    color: #00FF00;
}



.type1 {
    /* border: 1px white solid; */
    background-image: url("../sprites/Invaders/type_4.png");
    background-size: 70% 70%;
    /* Stretch image to fill container */
    background-repeat: no-repeat;
    background-position: center;
}

.type2 {
    /* border: 1px white solid; */
    background-image: url("../sprites/Invaders/type-2.png");
    background-size: 70% 70%;
    /* Stretch image to fill container */
    background-repeat: no-repeat;
    background-position: center;
}


.shield-cell.active {
    background-color: green;
    /* You can change this to match your style */
}

.invader_bullet {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
}

#game_over {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 50% transparent black */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* ensures it's above all other elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 505px) {
  .battle_field {
    width: 95vw;
    height: 100vmin !important;
    /* aspect-ratio: 4 / 3; */
  }

  .invaders_container {
    top: 35vmin;
    width: 80%;
  }

  #game_advancement {
    flex-direction: column;
    gap: 1rem;
  }

  #score_container, #attempts_container, #time_container {
    width: 100%;
    justify-content: space-between;
  }
}