/* Mobile Optimizations */

/* Previne zoom em inputs */
input,
select,
textarea {
    font-size: 16px;
}

/* Otimizações para touch */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Canvas otimizado */
canvas {
    -webkit-user-select: none;
    user-select: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

/* Botão de tiro responsivo */
#fire-btn-mobile {
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Previne comportamento padrão de alguns elementos */
button,
a,
input {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Safe area para notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Melhora performance de rendering */
* {
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Mobile landscape adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    #logo {
        display: none !important;
    }

    .content {
        font-size: 12px;
    }
}

/* Mobile portrait adjustments */
@media (max-width: 600px) {
    body {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    #container {
        width: 100%;
        height: 100%;
    }

    canvas {
        max-width: 100%;
        max-height: 100%;
    }
}

/* Desabilita comportamentos padrão do mobile que podem interferir */
input[type="button"],
input[type="submit"],
button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Cursor improvements */
input,
button,
select,
textarea {
    cursor: pointer;
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    canvas {
        image-rendering: -webkit-optimize-contrast;
    }
}