/* Padronização do botão voltar para todos os jogos na versão mobile */

/* Estilos base para o botão voltar */
#back-button {
    /* Posicionamento fixo */
    position: absolute !important;
    top: clamp(10px, 2vh, 20px) !important;
    right: clamp(10px, 2vw, 20px) !important;
    z-index: 1000 !important;
    
    /* Dimensões padronizadas */
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px) !important;
    min-width: 70px !important;
    min-height: 44px !important;
    
    /* Tipografia padronizada */
    font-size: clamp(0.8rem, 2vw, 1rem) !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    
    /* Cores padronizadas */
    color: white !important;
    background-color: #107C10 !important;
    
    /* Bordas e formato */
    border: none !important;
    border-radius: 8px !important;
    
    /* Interação */
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(16, 124, 16, 0.3) !important;
    
    /* Transições */
    transition: all 0.2s ease-in-out !important;
    
    /* Sombra */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    
    /* Texto */
    white-space: nowrap !important;
    text-decoration: none !important;
    text-align: center !important;
    
    /* Flexbox para centralização */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Estados de hover e focus */
#back-button:hover {
    background-color: #0A530A !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

#back-button:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

#back-button:focus {
    outline: 3px solid rgba(16, 124, 16, 0.5) !important;
    outline-offset: 2px !important;
}

/* Container para o botão (se existir) */
.ui-container {
    position: absolute !important;
    top: clamp(10px, 2vh, 20px) !important;
    right: clamp(10px, 2vw, 20px) !important;
    z-index: 1000 !important;
}

/* Ajustes específicos para mobile */
@media (max-width: 768px) {
    #back-button {
        /* Tamanhos otimizados para mobile */
        padding: clamp(10px, 2vw, 14px) clamp(18px, 4vw, 26px) !important;
        font-size: clamp(0.85rem, 2.2vw, 1.1rem) !important;
        min-width: 80px !important;
        min-height: 48px !important;
        
        /* Posicionamento ajustado para mobile */
        top: clamp(15px, 3vh, 25px) !important;
        right: clamp(15px, 3vw, 25px) !important;
    }
    
    /* Melhor área de toque em mobile */
    #back-button::before {
        content: '' !important;
        position: absolute !important;
        top: -8px !important;
        left: -8px !important;
        right: -8px !important;
        bottom: -8px !important;
        z-index: -1 !important;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    #back-button {
        padding: clamp(8px, 2vw, 12px) clamp(14px, 4vw, 20px) !important;
        font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
        min-width: 65px !important;
        top: clamp(10px, 2vh, 15px) !important;
        right: clamp(10px, 2vw, 15px) !important;
    }
}

/* Ajustes para orientação portrait */
@media (orientation: portrait) and (max-width: 768px) {
    #back-button {
        top: clamp(20px, 4vh, 30px) !important;
        right: clamp(20px, 4vw, 30px) !important;
    }
}

/* Ajustes para orientação landscape em mobile */
@media (orientation: landscape) and (max-height: 500px) {
    #back-button {
        top: clamp(5px, 1vh, 10px) !important;
        right: clamp(10px, 2vw, 15px) !important;
        padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 18px) !important;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem) !important;
    }
}

/* Suporte para dispositivos com notch */
@supports (padding: max(0px)) {
    #back-button {
        top: max(clamp(10px, 2vh, 20px), env(safe-area-inset-top, 10px)) !important;
        right: max(clamp(10px, 2vw, 20px), env(safe-area-inset-right, 10px)) !important;
    }
}

/* Ajustes para alto contraste */
@media (prefers-contrast: high) {
    #back-button {
        border: 2px solid white !important;
        background-color: #0A530A !important;
    }
    
    #back-button:hover {
        background-color: #107C10 !important;
        border-color: #ffffff !important;
    }
}

/* Ajustes para movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    #back-button {
        transition: none !important;
    }
    
    #back-button:hover {
        transform: none !important;
    }
    
    #back-button:active {
        transform: none !important;
    }
}

/* Garantir que o botão seja sempre visível */
#back-button {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}