body {
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    height: 98vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    position: relative;
    width: 50vw;
    height: 100vh;
    background-image: url(spacecraft.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid #050505;
    box-shadow: rgba(0, 0, 0, 0.699) 0px 19px 38px, rgba(0, 0, 0, 0.733) 0px 15px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    display: none; /* Hidden until game starts */
}

#start-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #1e90ff, #00ced1);
    color: white;
    padding: clamp(1rem, 2rem, 3rem);
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 200;
}

#start-banner h1 {
    font-size: clamp(2rem, 3rem, 4rem);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#start-banner p {
    font-size: clamp(1rem, 1.5rem, 2rem);
    margin: 1rem 0;
}

#start-banner button {
    padding: clamp(0.5rem, 1rem, 1.5rem) clamp(1rem, 2rem, 3rem);
    font-size: clamp(1rem, 1.5rem, 2rem);
    background: #ff4500;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#start-banner button:hover {
    background: #ff6347;
}

/* Rest of the existing CSS remains unchanged */
#enemies-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.enemy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.enemy img {
    width: clamp(5vw, 40px, 10vw);
    height: clamp(5vh, 40px, 10vh);
}

.enemy .word-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.enemy .target-word {
    color: white;
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 2rem, 3rem);
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: center;
    transition: transform 0.1s ease;
}

.enemy .typed-display {
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 1.5rem, 2.5rem);
    text-align: center;
    margin-top: clamp(0.3rem, 0.5rem, 1rem);
    position: absolute;
    top: clamp(3rem, 3rem, 4rem);
    left: 50%;
    transform-origin: center;
    transition: transform 0.1s ease;
}

#player-container {
    position: absolute;
    left: 50%;
    bottom: clamp(2vh, 40px, 5vh);
    transform: translateX(-50%);
}

#player {
    width: clamp(5vw, 80px, 15vw);
    height: clamp(5vh, 80px, 15vh);
    transform-origin: center;
}

.bullet {
    position: absolute;
    width: clamp(0.5vw, 5px, 1vw);
    height: clamp(0.5vh, 10px, 1vh);
    background: linear-gradient(to bottom, red, orange, yellow);
    border-radius: 50%;
    box-shadow: 0 0 clamp(0.2vw, 4px, 0.5vw) orange;
    transition: opacity 0.2s ease-out;
}

#score {
    position: absolute;
    top: clamp(0.5vh, 10px, 2vh);
    right: clamp(0.5vw, 10px, 2vw);
    color: yellow;
    font-size: clamp(1rem, 20px, 2rem);
    font-family: Arial, sans-serif;
}

#progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(0.5vh, 8px, 1vh);
    background: lightgreen;
    transition: width 0.1s linear;
}

#result-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: clamp(0.5rem, 15px, 2rem);
    text-align: center;
    display: none;
}

#restart-button {
    padding: clamp(0.5rem, 8px, 1rem) clamp(1rem, 16px, 2rem);
    font-size: clamp(0.8rem, 14px, 1.5rem);
    cursor: pointer;
}

.level-transition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: clamp(1rem, 20px, 3rem);
    text-align: center;
    font-size: clamp(1.5rem, 24px, 3rem);
    z-index: 100;
}

.blast-effect {
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    #game-container {
        width: 99vw;
        height: 98vh;
        border-radius: 5px;
        box-shadow: none;
    }

    .enemy img {
        width: clamp(8vw, 50px, 12vw);
        height: clamp(8vh, 50px, 12vh);
    }

    .enemy .target-word {
        font-size: clamp(1.2rem, 1.8rem, 2.5rem);
    }

    .enemy .typed-display {
        font-size: clamp(0.8rem, 1.2rem, 2rem);
        top: clamp(2.5rem, 2.8rem, 3.5rem);
    }

    #player {
        width: clamp(8vw, 100px, 15vw);
        height: clamp(8vh, 100px, 15vh);
    }

    #score {
        font-size: clamp(0.8rem, 16px, 1.8rem);
    }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
    #game-container {
        width: 60vw;
        height: 98vh;
    }
}