@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }
}

@keyframes flash{
    0%{
        opacity:1;
    }

    50%{
        opacity:.2;
    }

    100%{
        opacity:1;
    }
}

.fade-in{
    animation:fadeIn .4s ease;
}

.pulse{
    animation:pulse 1s infinite;
}

.flash{
    animation:flash .3s;
}

.weather-rain{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:50;
}

.weather-fog{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    rgba(255,255,255,.08);
}

.coin-pop{
    animation:
    pulse .5s ease;
}

.damage-flash{
    position:absolute;
    inset:0;
    background:red;
    opacity:.15;
    pointer-events:none;
}

#pauseMenu{
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:20px;
}

#pauseMenu button{
    width:220px;
    padding:15px;
    border-radius:10px;
    background:#2e7dff;
    color:white;
}

.mobile-controls{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:none;
    gap:10px;
}

.mobile-controls button{
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:white;
    font-size:1.2rem;
}

@media(max-width:768px){

    #mainMenu h1{
        font-size:2.4rem;
    }

    #hud{
        width:100%;
        justify-content:center;
    }

    #hud div{
        font-size:.8rem;
    }

    .mobile-controls{
        display:flex;
    }

    #gameCanvas{
        width:100vw;
        height:100vh;
        border:none;
    }
}