/* RESET */

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

/* FUNDO DO JOGO */

body{

    background:#0b0b0b;

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

    height:100vh;

    font-family:monospace;

    color:#00ff88;

}


/* CONTAINER DO JOGO */

#gameContainer{

    position:relative;

    border:4px solid #00ff88;

    box-shadow:
        0 0 10px #00ff88,
        inset 0 0 10px #003322;

}


/* CANVAS */

canvas{

    display:block;

    background:#111;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

}


/* HUD SUPERIOR */

#hud{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    padding:6px;

    display:flex;
    justify-content:space-between;

    background:rgba(0,0,0,0.6);

    font-size:14px;

}


/* VIDA */

#vida{

    color:#00ff88;
}


/* MISSÃO */

#missao{

    color:#00ccff;
}


/* ALERTA */

#alerta{

    position:absolute;

    top:50%;
    left:50%;

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

    font-size:48px;

    color:red;

    text-shadow:

        0 0 10px red,
        0 0 20px red;

    display:none;

}


/* RADAR FUTURO */

#radar{

    position:absolute;

    bottom:10px;
    right:10px;

    width:120px;
    height:120px;

    border:2px solid #00ff88;

    background:#001a10;

}


/* TEXTO ESTILO TERMINAL */

.terminal{

    color:#00ff88;

    letter-spacing:2px;

}


/* ANIMAÇÃO ALERTA */

@keyframes alertaFlash{

    0%{opacity:1}
    50%{opacity:0.3}
    100%{opacity:1}

}

.alertaAtivo{

    display:block;

    animation:alertaFlash 0.4s infinite;

}