/* Estilos globais para a pagina */
html, body{
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Estilos para todo o body */
body{
    background-color: transparent;
    font-family: 'firecode', monospace;
    color: #39FF14;
    font-size: 12px;
    overflow: hidden;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="48" viewBox="0 0 24 24"><path fill="%230D4D00" stroke="%2332FF00" stroke-width="1" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), crosshair;
    border-radius: 8px;
    border: #37ff149f 2px solid;
    border-width:2px 2px 2px 2px;
}

/* Estilos para o header */
header{
    
    text-align: center;
    padding: 20px;
    text-shadow: #39FF14 0px 8px 10px;
}

/* Esconder o jogo antes de iniciar */
main{
    display: none;
    user-select: none;
}

/* Estilos do botao de iniciar o jogo*/
.button_glitch{
    background-color: transparent;
    border: 2px solid #39FF14;
    color: #39FF14;
    padding: 10px 20px;
    font-family: 'firecode', monospace;
    font-size: 16px;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 24"><path fill="%230D4D00" stroke="%2332FF00" stroke-width="1" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>'), pointer;
    position: relative;
    transition: 0.2s;
}

/* Efeito do mouse sobre o botao */
.button_glitch:hover{
    background-color: #39FF14;
    color: black;
    animation: tremer-simples 0.05s infinite; /*ativa a animacao de tremor*/
}

/* usando keyframes para criar o efeito de tremor do botao */
@keyframes tremer-simples {
    /* de 0% a 100% o box-shadow alterna entre ciano e vermelho, criando um efeito de tremor com o botao*/
    0%, 100% {
        box-shadow: 8px 6px 15px #00ffff, -8px -6px 10px #ff0000; /* cria um clone fantasma ciano e vermelho atras*/
        transform: translate(2px, -1px); /* move o botao levemente para criar o efeito de tremor */
        text-align: right;
    }
    50% {
        /* Inverte: vermelho direita, ciano esquerda */
        box-shadow: -8px -6px 15px #00ffff, 8px 6px 10px #ff0000;
        transform: translate(-1px, 2px); /* move o botao levemente para criar o efeito de tremor */
        text-align: left;
    }
}

/* Estilo do User Interface */
.UI{
    padding: 20px;
    font-size: 16px;
    justify-self: right;
}

/*Estilo da isca*/
#target{
    position: absolute;
    padding: 15px;
    border: 2px solid #39FF14;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 24"><path fill="%230D4D00" stroke="%2332FF00" stroke-width="1" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>'),pointer;
    user-select: none;
    background: #003200d8;
    /*posicionamento inicial*/
    top: 55%;
    left: 50%;

    animation: tremer-simples 0.08s infinite;
    transition: all .2s ease;
}

/* Efeito do mouse sobre a isca */
#target:hover{
    transition: .2s;
    background: #ff33338e;
}

/* Estilo dos alvos corretos */
.correct-target{
    position: absolute;
    padding: 10px 20px;
    background-color: #00ff0033;
    border: 1px #39FF14 solid;
    color: #39FF14;
    font-weight: bold;
    cursor: pointer;
    animation: tremer-simples 0.1s infinite;
}

/* mouse sobre os alvos corretos */
.correct-target:hover{
    background-color: #00fc7e91;
}

/* Estilo do Terminal lateral */
#terminal_log{
    position: fixed;
    top: 3rem;
    left: 1rem;
    width: 25rem;
    height: 40rem;
    background-color: #000f00d9;
    border-left: 1px solid #39FF14;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 0 15px #39ff141a;
    pointer-events: none; /* nao atrapalhar os cliques no alvo */
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Estilo do texto dentro do terminal */
#terminal_log p{
    margin: 5px 0;
    line-height: 1.4;
    text-shadow: none;
}

/* Estilos para o background */
#matrix_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    border: none;  
    z-index: -1;   /* Joga para tras de todos os elementos do jogo */
    pointer-events: none; /*impede click no iframe*/
    opacity: 0.95;
   
}